@fonticonpicker/fonticonpicker

中文文档

3.1.1发布于 2018/03/25MITCommonJS零依赖近 30 天下载 1.5万

j 查询插件,该插件允许您在管理表格中包含一个带有搜索和页标的简单的图标取取取器.

文档目录28 节

安装
与国家预防机制/也门
全球 script / CDN 支持
使用ES6模块
如何运作
包含 Java 脚本
包含 CSS
包含字体图标
以 j 查询初始化
插件选项
插件 APIs
设置Icon () String 新Icon (英语)
设置Icons () Array|Object {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00…
设置Page () String|Number 页: 1
销毁 Picker ()
刷新选择( T) Object|Boolean 新选项 )
重新定位选择器( )
本地演示的重要注释
浏览器兼容性
j 查询兼容性
发展环境
设置
编码标准
自动接钩
持续整合( CI)
正在本地测试
可用的 Gulp 命令
贷项

j 查询字体IconPicker `v3.1.1`

j 查询字体IconPicker 是一个小(4.05KB gzipped) j 查询插件, 允许您在管理表格中包含一个优雅的图标拾取器, 其中包含分类, 搜索和页标。图标列表可以手动加载 SELECT 字段,一个 Array 或者说 Object 图标或直接取自 Fontello config.json 或爱克月 selection.json 文档。转到官方插件页面用于实例和文件.

字体Icon Picker 键 ưμ㼯a 支持 j 查询 1.12.4 结束 3.3.0。。。 .

最初开发于 micc83/fontIconPicker (英语) 现在又分开了组织为了更好的合作.

fontIconPickers

安装

与国家预防机制/也门

字体IconPicker已经通过国家预防机制发布。所以你可以使用国家防范机制安装或下载释放。。。 .

npm install [email protected] @fonticonpicker/fonticonpicker --save

现在使用网页包或浏览器.

const jQuery = require( 'jquery' );
const fip = require( '@fonticonpicker/fonticonpicker' )( jQuery );

jQuery( '.selector' ).fontIconPicker( {
    // Options
} );

全球 `script` / CDN 支持

您可以将字体IconPicker依赖性直接放入您的 html 与 <script> 财务报告和审定财务报表 <link> 标签。转到字体 IconPicker 释放并下载 fontIconPicker.zip 来自最新资产的文件。它将包含所有脚本和用于生产的样式.

您也可以使用来自 unpkg.com (英语)。。。 .

<!-- styles -->
<!-- base | always include -->
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@fonticonpicker/fonticonpicker/dist/css/base/jquery.fonticonpicker.min.css">

<!-- default grey-theme -->
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@fonticonpicker/fonticonpicker/dist/css/themes/grey-theme/jquery.fonticonpicker.grey.min.css">

<!-- optional themes | no need to include default theme -->
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@fonticonpicker/fonticonpicker/dist/css/themes/bootstrap-theme/jquery.fonticonpicker.bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@fonticonpicker/fonticonpicker/dist/css/themes/dark-grey-theme/jquery.fonticonpicker.darkgrey.min.css">
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@fonticonpicker/fonticonpicker/dist/css/themes/inverted-theme/jquery.fonticonpicker.inverted.min.css">

<!-- scripts -->
<script type="text/javascript" src="https://unpkg.com/@fonticonpicker/fonticonpicker/dist/js/jquery.fonticonpicker.min.js"></script>

使用ES6模块

如果你想用的话 ES6 模块,然后必须手动初始化.

import jQuery from 'jquery';
import initFontIconPicker from '@fonticonpicker/fonticonpicker';

// Initiate the jQuery plugin
initFontIconPicker( jQuery );

jQuery( '.selector' ).fontIconPicker( {
    // Options
} );

现在,唯一可行的正确启动 fontIconPicker 结束滚出j是直接通过 j 查询在 initFontIconPicker 函数。若为你知道更好的方法, 随意建议.

如何运作

只要包括 jQuery 的副本,字体 IconPickers 脚本,字体 IconPickers 主题和您的字体图标. 现在,你可以触发它在一个 SELECT 或者说 INPUT[type="text"] 键.

包含 Java 脚本

<!-- jQuery -->
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>

<!-- fontIconPicker JS -->
<script type="text/javascript" src="js/jquery.fonticonpicker.min.js"></script>

包含 CSS

<!-- fontIconPicker core CSS -->
<link rel="stylesheet" type="text/css" href="css/base/jquery.fonticonpicker.min.css" />

<!-- required default theme -->
<link rel="stylesheet" type="text/css" href="css/themes/grey-theme/jquery.fonticonpicker.grey.min.css" />

<!-- optional themes -->
<link rel="stylesheet" type="text/css" href="css/themes/dark-grey-theme/jquery.fonticonpicker.darkgrey.min.css" />
<link rel="stylesheet" type="text/css" href="css/themes/bootstrap-theme/jquery.fonticonpicker.bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/themes/inverted-theme/jquery.fonticonpicker.inverted.min.css" />

包含字体图标

<!-- Font -->
<link rel="stylesheet" type="text/css" href="fontello-7275ca86/css/fontello.css" />
<link rel="stylesheet" type="text/css" href="icomoon/icomoon.css" />

以 j 查询初始化

最后给字体IconPicker打电话 SELECT 或者说 INPUT[type="text"] 键.

<!-- SELECT element -->
<select id="myselect" name="myselect" class="myselect">
    <option value="">No icon</option>
    <option>icon-user</option>
    <option>icon-search</option>
    <option>icon-right-dir</option>
    <option>icon-star</option>
    <option>icon-cancel</option>
    <option>icon-help-circled</option>
    <option>icon-info-circled</option>
    <option>icon-eye</option>
    <option>icon-tag</option>
    <option>icon-bookmark</option>
    <option>icon-heart</option>
    <option>icon-thumbs-down-alt</option>
    <option>icon-upload-cloud</option>
    <option>icon-phone-squared</option>
    <option>icon-cog</option>
    <option>icon-wrench</option>
    <option>icon-volume-down</option>
    <option>icon-down-dir</option>
    <option>icon-up-dir</option>
    <option>icon-left-dir</option>
    <option>icon-thumbs-up-alt</option>
</select>
<!-- JavaScript -->
<script type="text/javascript">
    // Make sure to fire only when the DOM is ready
    jQuery(document).ready(function($) {
        $('#myselect').fontIconPicker(); // Load with default options
    });
</script>

<!-- INPUT element -->
<input type="text" name="mytext" id="mytext" />
<script type="text/javascript">
    jQuery(document).ready(function($) {
        $('#mytext').fontIconPicker({
            source:    ['icon-heart', 'icon-search', 'icon-user', 'icon-tag', 'icon-help'],
            emptyIcon: false,
            hasSearch: false
        });
    });
</script>

插件选项

以下是字体IconPicker选项:

var $picker = $('.picker').fontIconPicker({
    theme              : 'fip-grey',              // The CSS theme to use with this fontIconPicker. You can set different themes on multiple elements on the same page
    source             : false,                   // Icons source (array|false|object)
    emptyIcon          : true,                    // Empty icon should be shown?
    emptyIconValue     : '',                      // The value of the empty icon, change if you select has something else, say "none"
    autoClose          : true,                    // Whether or not to close the FIP automatically when clicked outside
    iconsPerPage       : 20,                      // Number of icons per page
    hasSearch          : true,                    // Is search enabled?
    searchSource       : false,                   // Give a manual search values. If using attributes then for proper search feature we also need to pass icon names under the same order of source
    appendTo           : 'self',                  // Where to append the selector popup. You can pass string selectors or jQuery objects
    useAttribute       : false,                   // Whether to use attribute selector for printing icons
    attributeName      : 'data-icon',             // HTML Attribute name
    convertToHex       : true,                    // Whether or not to convert to hexadecimal for attribute value. If true then please pass decimal integer value to the source (or as value="" attribute of the select field)
    allCategoryText    : 'From all categories',   // The text for the select all category option
    unCategorizedText  : 'Uncategorized',         // The text for the select uncategorized option
    iconGenerator      : null,                    // Icon Generator function. Passes, item, flipBoxTitle and index
    windowDebounceDelay: 150,                     // Debounce delay while fixing position on windowResize
    searchPlaceholder  : 'Search Icons'           // Placeholder for the search input
});

插件 APIs

字体IconPicker提供3个公共API来操纵图标取取器.

设置Icon () `String` 新Icon (英语)

使用这种方法在程序上设置图标 .

$picker.setIcon( 'fa fa-arrow-down' );

设置Icons () `Array|Object` {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}新针头, `Array|Object` 图标搜索

使用这种方法来动态地改变苍蝇上的图标. newIcons 财务报告和审定财务报表 iconSearch (可选)数据类型与 source 财务报告和审定财务报表 searchSource 选项.

$picker.setIcons(['icon-one', 'icon-two']);
$picker.setIcons(['icon-one', 'icon-two'], ['Icon one will be searched by this', 'Icon two will be searched by this']);

设置Page () `String|Number` 页: 1

使用这种方法在fip弹出中程序设定 pagination 。这个在打开状态和关闭状态之间持续,直到用户手动更改了页码.

$picker.setPage( 2 );
$picker.setPage( 'first' );
$picker.setPage( 'last' );

方法接受数字,只有两个特殊的字符串.

数字对应从1开始的页码.
first 将会将页码设置为第一页.
last 将设置页码为最后一页.

销毁 Picker ()

用此来去掉图标取取器并恢复原始元素.

$picker.destroyPicker();

刷新选择( T) `Object|Boolean` 新选项 )

从 DOM 或通过选项刷新图标拾取器。当DOM在调用毁灭方法或更改选项值后被更改或重新初始化时有用.

$picker.refreshPicker({
    theme: 'fip-bootstrap',
    hasSearch: false
});

重新定位选择器( )

取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取如果 DOM 已更改并下拉, 请使用此功能打开。或者,如果你的拾取器在一个滚动容器.

var picker = $('.myselect').fontIconPicker();
$('.mycontainer').on( 'scroll', function() {
    picker.repositionPicker();
} );

备选方案和API将在2008年1月1日至12月31日期间进行详细讨论项目页面。。。 .

本地演示的重要注释

仅在本地加载演示时 : 在Firefox字体IconPicker图标中,由于CORS,不会正确显示. 出于同样的原因,"从Fontello JSON config文件中获取的Load图标"在Chrome或IE 10上将无法工作. 如果您需要做一些本地测试, 您可以冒着风险禁用严格的起源政策 .

使用捆绑 浏览器同步用于运行演示的服务器。见设置学习如何.

浏览器兼容性

j 查询图标Picker已成功测试于:Firefox(对接)、Safari(对接)、Chrome(对接)、IE8+和Opera(对接).

j 查询兼容性

jQuery 1.12.4 已定为 peerDependencies 输入 package.json我们有测试 1.x 财务报告和审定财务报表 3.x 树枝。 jQuery 迁移不会产生任何错误使用时 3.x。。。 .

发展环境

如果你想作出贡献,请记住一些事情.

任何代码都不应该产生ESLint和Stylelint的任何错误. 我们检查错误如果它真的产生任何错误,它将被否决.
所有新的联署文件代码都应有单位或整合测试,并带有笑话.

设置

首先确保节点QQv8被安装. 然后复制仓库

git clone [email protected]:fontIconPicker/fontIconPicker.git

运行

cd fontIconPicker
npm install
npm install -g npx

这将安装所有依赖。您不需要安装 jquery 就是这样定义于 devDependencies。。。 .

现在编辑文件 src 需要的时候,请跑

npx gulp serve

这将服务于您的浏览器中的实时更改。打开它 http://localhost:3000。。。 .

编码标准

所有附加模块均应入内 src/js/modules 单位测试 __tests__/unit。。。 .
写联署材料 ES6 标准。。。 . 这个实值学习的好地方将会与贝贝尔一起编译.
不直接写入 CSS 文件。写入常设委员会它会当 npx gulp serve 正在运行.
如果您正在写一个主题, 请在第一个框中包含 demo/index.html。。。 .
如果您正在写入一个选项或 API,请在单独的框中包含 demo/index.html。。。 .
联合来文的所有新特征都应有单位/整合和/或e2e测试。我们用锡压用于e2e测试和欢笑用于单位/整合测试.

自动接钩

当你跑的时候 npm install 这是第一次, 嘘设置了几根钩子具体来说做两件事.

检查是否正确发送消息。。。 .
内嵌运行 js 财务报告和审定财务报表 scss 用于在按下前避免出错的文件.

持续整合( CI)

此外,我们运行测试服每推法语科。。。 .

让它跑来跑去

npm run test

当地在你的机器。它会插入所有文件并运行 jest 测试.

正在本地测试

字体IconPicker有两套测试.

单位和整合测试欢笑

npx jest

末端测试用锡压

npx cypress open

然后从应用程序中进行测试。或者说

npx cypress run

从无头浏览器运行终端测试. 你没必要担心设置测试环境因为它是自动处理的以锡压。。。 .

可用的 Gulp 命令

default - 构建所有脚本/样式并放入 dist 文件夹.
build - 和默认一样.
lint - 把CSS和JS的档案都记录下来.
- lint:script - 把JS的档案都记录下来.
- lint:style - 打开所有SCSS文件.
fonts - 复制字体文件到 dist 目录.
serve - 构建文件,init浏览器同步并监视文件以创建dev env.

用 npx。。。 .

贷项

j 查询字体IconPicker 由亚历山德罗·比诺伊特打开洗手间。。可以使用问题跟踪器用于报告错误或特性请求.

特别感谢迷你MAC为这个想法,Zeno Rocha为jQuery插件锅炉板,Dave Gandy & KayaMoon为美丽的图标集,Elliot Condon为惊人的高级自定义场WordPress插件.

版本与发布记录

@fonticonpicker/fonticonpicker 共发布 7 个版本，首次发布于 2018/03/22；过去 12 个月发布了 0 个版本。

版本	发布日期	距今
`3.1.1`latest	2018/03/25	8 年前
`3.1.0`	2018/03/25	8 年前
`3.0.0`	2018/03/24	8 年前
`3.0.0-beta.1`	2018/03/24	8 年前
`3.0.0-alpha.2`	2018/03/22	8 年前
`3.0.0-alpha.1`	2018/03/22	8 年前

关于 @fonticonpicker/fonticonpicker 的常见问题

@fonticonpicker/fonticonpicker 是什么？

j 查询插件,该插件允许您在管理表格中包含一个带有搜索和页标的简单的图标取取取器.

如何安装 @fonticonpicker/fonticonpicker？

在项目目录运行 npm install @fonticonpicker/fonticonpicker，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：jquery（>=1.12.4）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

@fonticonpicker/fonticonpicker 支持 TypeScript 吗？

该包的 package.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/fonticonpicker__fonticonpicker 是否存在。

@fonticonpicker/fonticonpicker 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require()；在 ES Module 项目中也可以用 import 引入（Node.js 会把 module.exports 作为默认导出）。

@fonticonpicker/fonticonpicker 需要什么版本的 Node.js？

package.json 的 engines 字段要求 Node.js >=8.0.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

@fonticonpicker/fonticonpicker 可以商用吗？

@fonticonpicker/fonticonpicker 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

@fonticonpicker/fonticonpicker 的下载量有多少？

根据 npm 官方下载统计，@fonticonpicker/fonticonpicker 在 2026/10/15 – 2026/11/13 这 30 天内被下载 15,113 次，日均约 504 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

@fonticonpicker/fonticonpicker 还在维护吗？

最新版本 3.1.1 发布于 2018/03/25（8 年前）；至今共发布 7 个版本，其中过去 12 个月发布了 0 个；首次发布于 2018/03/22。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。

npm install @fonticonpicker/fonticonpicker

pnpmpnpm add @fonticonpicker/fonticonpicker
yarnyarn add @fonticonpicker/fonticonpicker
bunbun add @fonticonpicker/fonticonpicker

peer 依赖jquery >=1.12.4

npm 7+ 与 pnpm 8+ 会自动安装必需的 peer 依赖，Yarn 需手动安装。

在你的项目目录中运行此命令。

近 30 天下载

15,113

约 1.5万次日均 504 次

统计周期 2026/10/15 – 2026/11/13
数据来自 npm 官方下载统计，今天更新

最新版本3.1.1发布于 8 年前

开源许可MIT宽松许可

包体积13.7 MB24 个文件 · 解压后

运行依赖0 个另有 1 个 peer 依赖

模块格式CommonJS

TypeScript未声明类型可查找 @types/fonticonpicker__fonticonpicker

Node.js>=8.0.0

发布版本7 个近 12 个月 0 个

首次发布2018/03/228 年前

元数据更新2022/04/05

每一个软件包背后，
都有分享与创造的人。