icomoon的使用方式

￡神魔★判官ぃ 2022-06-17 08:27 191阅读 0赞

转自：http://blog.csdn.net/u012550080/article/details/51835096

#  icomoon图标的使用  #

<div class="article_manage clearfix">
        <div class="article_r">
            <span class="link_postdate">2016-07-05 22:20</span>
            <span class="link_view" title="阅读次数">2266人阅读</span>
            <span class="link_comments" title="评论次数"> <a href="#comments" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_pinglun'])">评论</a>(0)</span>
            <span class="link_collect tracking-ad" data-mod="popu_171"> <a href="javascript:void(0);" onclick="javascript:collectArticle('icomoon%e5%9b%be%e6%a0%87%e7%9a%84%e4%bd%bf%e7%94%a8','51835096');return false;" title="收藏" target="_blank">收藏</a></span>
             <span class="link_report"> <a href="#report" onclick="javascript:report(51835096,2);return false;" title="举报">举报</a></span>
    
        </div>
    </div>
    <div class="embody" style="display:none" id="embody">
        <span class="embody_t">本文章已收录于：</span>
        <div class="embody_c" id="lib" value="{"err":0,"msg":"ok","data":[]}"></div>
    </div>
    <style type="text/css">        
            .embody{
                padding:10px 10px 10px;
                margin:0 -20px;
                border-bottom:solid 1px #ededed;                
            }
            .embody_b{
                margin:0 ;
                padding:10px 0;
            }
            .embody .embody_t,.embody .embody_c{
                display: inline-block;
                margin-right:10px;
            }
            .embody_t{
                font-size: 12px;
                color:#999;
            }
            .embody_c{
                font-size: 12px;
            }
            .embody_c img,.embody_c em{
                display: inline-block;
                vertical-align: middle;               
            }
             .embody_c img{               
                width:30px;
                height:30px;
            }
            .embody_c em{
                margin: 0 20px 0 10px;
                color:#333;
                font-style: normal;
            }
    </style>
    <script type="text/javascript">
        $(function () {
            try
            {
                var lib = eval("("+$("#lib").attr("value")+")");
                var html = "";
                if (lib.err == 0) {
                    $.each(lib.data, function (i) {
                        var obj = lib.data[i];
                        //html += '<img src="' + obj.logo + '"/>' + obj.name + "  ";
                        html += ' <a href="' + obj.url + '" target="_blank">';
                        html += ' <img src="' + obj.logo + '">';
                        html += ' <em><b>' + obj.name + '</b></em>';
                        html += ' </a>';
                    });
                    if (html != "") {
                        setTimeout(function () {
                            $("#lib").html(html);                      
                            $("#embody").show();
                        }, 100);
                    }
                }      
            } catch (err)
            { }
    
        });
    </script>
      <div class="category clearfix">
        <div class="category_l">
           <img src="http://static.blog.csdn.net/images/category_icon.jpg">
            <span>分类：</span>
        </div>
        <div class="category_r">
                    <label>
                        <span onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_fenlei']);">html<em></em></span>                       
                    </label>      
                    <label>
                        <span onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_fenlei']);">css<em></em></span>                       
                    </label>      
                    <label>
                        <span onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_fenlei']);">js<em></em></span>                       
                    </label>      
                    <label>
                        <span onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_fenlei']);">icon<em></em></span>                       
                    </label>      
        </div>
    </div>
    <script type="text/javascript" src="http://static.blog.csdn.net/scripts/category.js"></script>

目录(?)\[+\]

1.  下载选定icomoon图标
2.  web代码的编写

早上听同事介绍icomoon的图标，自己上网查找用例，发现确实挺好用，只需在网址：[ https://icomoon.io/app/ ][https_icomoon.io_app_] 上选择相应图标点击font设置，然后点击下载。将下载文件解压，然后将font文件夹和style.css拷贝到项目中，引用css即可，作为以后参考

转载了相关介绍：转载自：http://blog.csdn[.NET][]/u013938465/article/details/50680468

最近项目大量用到字体图标，大家也知道，字体图标任意缩放不会失真，也大大减少请求数量，非常好用。以下将讲解本人如何根据美工提供的.svg文件生成字体图标并应用。

借助一个在线生成工具：[https://icomoon.io/app/\#/select][https_icomoon.io_app_select]

**1、进入网址：主页面**

**![Center][]**

**2、新建一个图集**

**![50680468][]![Center 1][]**

**3、添加.svg图片（可以使用现成的，也可以使用自定义的）**

**使用现成的点击页面红色的Add Icons…**

**使用自定义的直接拖拽进图集即可添加**

**![50680468][]![Center 2][]**

**![50680468][]![Center 3][]**

**4、生成字体文件**

**（1）选择好要生成的图标（自由选择）**

**（2）点击底部的：”Generate Font F”**

**![50680468][]![Center 4][]**

**可以自由命名**

**![50680468][]![Center 5][]**

**5、修改完成后，点击生成Font**

**![50680468][]![Center 6][]**

**下载到压缩文件：**

**![50680468][]![Center 7][]**

![50680468][]

![Center 8][]

运用：将fonts文件夹全部内容和style.css文件放到相应的项目中。

![50680468][]![Center 9][]

根据css文件下面生成的class类的名称添加到html对应的节点上即可添加字体。

当然添加字体还需要设置font-size，也可以根据实际情况设置color改变其颜色。

![50680468][]![Center 10][]

转载自:http://blog.csdn[.Net][.NET]/goodgirl1991/article/details/50416974

icomoon图标是一个超赞超实用的开源图标系列，其图标官网地址为https://icomoon.io/icons.html

好，接下来介绍如何将该系列图标应用在web页面。

# 下载选定icomoon图标 #

![Center 11][]

点击IcoMoon App，进入页面后，选择想要引入web页面的图标，并且点击edit按钮后分别点击选择的图标进行编辑 ![Center 12][]

编辑结束后，点击generate font按钮 ![Center 13][]

点击download下载字体样式文件并从getCOde处可以获得图标的html转义码 ![Center 14][]

![Center 15][]

# web代码的编写 #

首先当然是需要将自定义字体样式引入web页面

**\[css\]** [ view plain][view plain] [ copy][view plain]

1.  @font-face\{
2.  font-family:‘icomoon’;
3.  src:url(‘icomoon.eot’);
4.  src:url(‘font/icomoon.eot?\#iefix’) format(‘embedded-opentype’),
5.  url(‘font/icomoon.woff’) format(‘woff’),
6.  url(‘font/icomoon.ttf’) format(‘truetype’),
7.  url(‘font/icomoon.svg\#SofiaProLight’) format(‘svg’);
8.  font-weight:normal;
9.  font-style:normal;
10. 
11. \}

![save_snippets.png][]

然后编写html代码，并描述指定标签的css样式，向该标签中添加icomoon图标。

**\[html\]** [ view plain][view plain] [ copy][view plain]

1.  <body>
2.  <div data-icon=“&\#xe901;”></div><!–在之前获得的图标html转义码，用来指定在该标签处添加哪一图标–>
3.  <div data-icon=“&\#xe900;”></div>
4.  </body>

![save_snippets.png][]

**\[css\]** [ view plain][view plain] [ copy][view plain]

1.  div:after\{<!–:before或者:after必写，不然无法显示出图标–>
2.  font-family:‘icomoon’;
3.  content: attr(data-icon);<!–此处指定向标签中添加哪一图标–>
4.  
5.  \}

![save_snippets.png][]

通过以上步骤，图标得以显示

![Center 16][]

document.getElementById("bdshell\_js").src = "http://bdimg.share.baidu.com/static/js/shell\_v2.js?cdnversion=" + Math.ceil(new Date()/3600000) var fromjs =  ("\#fromjs");  
if (fromjs.length > 0) \{  ("\#fromjs .markdown\_views pre").addClass("prettyprint"); prettyPrint();  ('pre.prettyprint code').each(function () \{  
var lines = (this).text().split('\\n').length; var  numbering= ('

*  ').addClass('pre-numbering').hide();  (this).addClass(′has−numbering′).parent().append(numbering); for (i = 1; i

[https_icomoon.io_app_]: https://icomoon.io/app/
[.NET]: http://lib.csdn.net/base/dotnet
[https_icomoon.io_app_select]: https://icomoon.io/app/#/select
[Center]: /images/20220617/6e9304e0f2624340adb30490d4f6ce3f.png
[50680468]: /images/20220617/2d1dd4b0d4cf422bbcecd7e526468433.png
[Center 1]: /images/20220617/60d3fe9ea59544c8864e7609eb2ffc6a.png
[Center 2]: /images/20220617/a010c7b79dc5467d9934e58b89cda813.png
[Center 3]: /images/20220617/913928140bd84c8facc62f34347a77e3.png
[Center 4]: /images/20220617/4fa85f6e0965449387b8781196eaeed9.png
[Center 5]: /images/20220617/abfa9d562ce3445bac962b3188a6d15a.png
[Center 6]: /images/20220617/eb1c3ebb567e42eab17d3ff8cf354d09.png
[Center 7]: /images/20220617/f23857279847439db18da31e3e615535.png
[Center 8]: /images/20220617/98104792a0da42709ae590413cf01d74.png
[Center 9]: /images/20220617/89a30eff563d4046ad6eb45a8bcddfa2.png
[Center 10]: /images/20220617/8eae9d041dc5497b897879718dc10bd4.png
[Center 11]: /images/20220617/0320e768b94e4851b9b9412a1ddf234a.png
[Center 12]: /images/20220617/763ee7f44d9e4e5895b5f698497098b1.png
[Center 13]: /images/20220617/22c5babb43964332839dfabc432a30fe.png
[Center 14]: /images/20220617/a079fbb85f96423ea65f2190c5ca8cf2.png
[Center 15]: /images/20220617/711c201ca8464121914096a6551abcab.png
[view plain]: http://blog.csdn.net/goodgirl1991/article/details/50416974#
[save_snippets.png]: /images/20220617/e5c5d26f6d974e3598c5a931c5731f05.png
[Center 16]: /images/20220617/0352807eaef144c5abb7756e02f9f119.png