zoukankan      html  css  js  c++  java
  • jQuery插件fontIconPicker配合FontAwesome字体图标库的使用

    同样先上效果图:

    怎么样,是不是很好看,jquery fontIconPicker这个插件做的很不错,支持分类,搜索,还有分页功能,可以自定义分页,具体的使用方法我就不一介绍了,我只说一下如何使用font-awesome图标库,只需跟着下面几步走,就可以轻松配置。

    1、引入核心样式文件

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

    2、引入主题样式文件,官方提供了四种主题,还可以自定义主题,这里我选择了bootstrap样式 

    <link rel="stylesheet" type="text/css" href="jquery-fontIconPicker/themes/bootstrap-theme/jquery.fonticonpicker.bootstrap.min.css" />

    3、引入font-awesome字体图标库

    <!-- Font -->
    <link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css" />

    4、引入jquery

    <!-- jQuery -->
    <script src="jquery/dist/jquery.min.js"></script>

    5、引入fontIconPicker核心js

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

    6、引入font-awesome icon source

    <!-- font-awesome icon source -->
    <script type="text/javascript" src="fa-icon-source.js" ></script>

    7、创建Input输入框

    <input type="text" id="picker" name="picker"/>

    8、初始化fontIconPicker

    <script type="text/javascript">
        $(function() {
            /**
             * Init the fontIconPickers on the jumbotron
             */
            $('#picker').fontIconPicker({
                source: fa_icons,
                searchSource: fa_icons,
                //useAttribute: true,
                theme: 'fip-bootstrap',
                //attributeName: 'data-icomoon',
                emptyIconValue: 'none',
            });
        });
    </script>

    是不是很简单呀~ 博主我不想说费了多少周折,最后才弄好的。。。。。在此发出来,方便各位攻城狮参考,也主要是为了我自己以后好找~~哈哈。Demo我会传到附件中。请自行下载。http://download.csdn.net/detail/u014552726/9652873

  • 相关阅读:
    unity, 调节图片导入尺寸
    photoshop, 钢笔上色
    maxscript, 批量导出物体
    unity, readOnly varible
    通过Maven找java source源码方法
    Nginx技巧:灵活的server_name,Nginx配置一个服务器多个站点 和 一个站点多个二级域名
    设置局域网共享文件不需要用户名密码
    SELECT INTO 和 INSERT INTO SELECT 两种表复制语句
    利用nginx泛域名解析配置二级域名和多域名
    三分钟了解Activity工作流
  • 原文地址:https://www.cnblogs.com/superfeeling/p/10878210.html
Copyright © 2011-2022 走看看