主页 » 建站笔记 » 正文

抛弃Font-Awesome—icon字体图标更好的解决方案:来自阿里妈妈的iconfont

 bandian2015/09/07 14:46 67,400 ℃ 15条点评
小号字体中号字体大号字体
第一步:将你看上的图标加入到购物车第二步:存储为项目或者下载到本地第三步:下载修改并调用CSS文件第四步:在网页中使用icon图标字体 网站...

网站使用icon字体图标的好处之前也说过,这里就不再赘述了。

今天无意中发现的iconfont这个网站,很有点相见恨晚的感觉,因为就在昨天我还在为icon字体的事儿发愁:网站本来是使用了icon字体图标的,是主题作者清枫自制的几个文件,效果本来挺好的,但有一个bug是我发现在chrome下面很多图标都无法显示,不管我将字体文件怎样重新编辑和生成都不能解决。

在认识到以我现有的水平是搞不定这个问题的之后,只好很不情愿的将字体文件全部替换成Font Awesome字体了。确实是很不情愿,因为Font Awesome仅字体文件就有好几百KB(svg文件达到194KB),这无疑会增加网站访问的压力,虽然我现在用着七牛每个月10G的免费流量,但也不想给网站增加额外的几百KB请求的负担不是。还好今天发现了iconfont,下面就来说说为什么我要将刚修改好的Font Awesome字体抛弃而转用iconfont。

随便说说两者的优缺点

其实主要是说iconfont的优点和Font Awesome的缺点。-_-|||
iconfont的图标库相当巨大,我在写上一篇文章的时候还是51794个,现在刷新之后图标数量已经是52090个了。如果这么大的一个库里面仍然没有你需要的图标的话,你也可以自己动手制作你自己的图标然后使用网站的在线生成工具来生成字体文件,分分钟就可以使用了。

除了拥有巨大的图标库之外,iconfont最值得推荐的原因还在于她使用上的灵活性(实话说,iconfont给我最初的印象是有点像现在各大运营商主打的可自由搭配的积木套餐),因为她完全可以由你自由搭配组合、按需索取。在自定义Walker类给WORDPRESS导航菜单添加ICON字体图标这篇文章中我就提到过。如果你的网站一共只需要用到5个图标,那么你只需要将这5个图标的字体文件和相关的css下载下来就可以用了。如果你想使用iconfont的CDN服务的话,你都不用下载,直接将这几个图标添加到你自己的项目中,然后在你的网站里面引用一个CSS文件就可以了。

再反观Font Awesome,哪怕你只是要用到2个图标,你都必须要把所有文件都下载下来才能使用。而上面也说了,仅SVG就194KB大了,还有其他几个字体文件加起来一共有400+KB,这还是没有算上同样好几十KB的CSS文件。

孰优孰劣是不是很清楚?相信你已经有了自己的选择。

来,下面说说如何使用,其实很简单,但还是理一个步骤给不是很懂的同学。

第一步:将你看上的图标加入到购物车

官方叫法是“暂存架”,购物车只是我的叫法,好像并不准确,因为不需要花钱的啊,但是它用了一个购物车的图标,所以暂且这样称呼吧。
这里你可以在iconfont的图标库里面寻找你要的图标,但是我不建议你这样做,因为默认给出的几个官方图标库里面的图标是不全的。正确的做法是在导航栏右侧的输入框中输入关键词来搜索图标,这样就会将网友制作的图标都搜出来。(我一开始就是在图标库中找微信、twitter和QQ空间的图标怎么也找不到,后来试着在上面搜索了一下,出来大把的,才知道官方库里面是没有收录这些图标的。。。)

添加iconfont图标到购物车

第二步:存储为项目或者下载到本地

就像上面图片中的那样,添加到购物车之后就可以存为项目或下载到本地,这里看你的需求了。反正我是想使用阿里的CDN,所以直接存为项目了。存储为项目的时候你可以选择存为新项目还是添加到已有的项目里面,确定之后会跳转到项目详情页。

第三步:下载修改并调用CSS文件

在项目详情页里面你还是可以选择是下载文件到本地使用还是使用阿里的CDN,当然选择CDN了(也就是页面中的获取在线链接)。这里建议使用Font Class,因为如果你选择Unicode的话CSS中图标的编码都要自己写,这个有点麻烦啊,不符合我这种懒鬼的风格,所以如果你也是懒鬼一枚请将下图中右上角的滑块滑到右侧。

选择Font Class

然后鼠标移到左侧的获取在线链接这里就能看到生成的CSS文件了,你现在有两个选择:一是直接调用这个文件,在网站的HTML中修改添加图标的元素的类为"iconfont icon-xxx"的;第二个选择是将这个文件下载下来,然后做一些修改之后传到服务器本地调用,然后在网站的HTML中修改添加图标的元素的类为"icon-xxx"。我选择的是第二种,大家随意。
选择第二种的话需要对CSS做一点小的修改,将选择器“.iconfont”改为“[class*=icon-],[class^=icon-]”:

[class*="icon-"],[class^="icon-"]{
font-family:"iconfont"!important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing:
antialiased;
-webkit-text-stroke-width:0.2px;
-moz-osx-font-smoothing:grayscale;}

然后引用CSS文件就OK了。

第四步:在网页中使用icon图标字体

CSS调用之后就可以在HTML中给元素添加CSS类来显示图标了,看下面这张图,比如我要调用图片中的小火箭这个图标,那我就要将我的HTML修改为

<i class="icon-xiaohuojian"></i>

这样既可。

修改HTML元素为图标的类名

wordpress导航栏怎么使用icon图标字体可以看看这篇文章

上一篇:给wordpress导航菜单添加icon字体图标
下一篇:[装逼利器]ObjectDock Plus 2 汉化破解版——给你的windows穿上苹果机的马甲
版权信息
本文遵循 BY-NC-SA 共享方式,永久链接:https://www.augsky.com/?p=775
转载请注明转自 » 格部落格 » 抛弃Font-Awesome—icon字体图标更好的解决方案:来自阿里妈妈的iconfont

已有15条评论,欢迎点评!

  1. avatar#5abao

    题主,Font-Awesome 用class方法可以很好的结合bootstrap控制大小也方便,iconfont怎么用class方法控制大小呢
    :06:

    2017-05-02 pm4:49回复
  2. avatar#4leungwensen

    也不一定要放弃font-awesome的,可以用font-awsome的SVG版本,直接只把用到的图标加到页面中来。http://leungwensen.github.io/svg-icon/#awesome 用SVG sprite会有更好的图标体验。

    2016-07-26 pm3:11回复
  3. avatar#3feng

    统一字体,然后用字蛛,把字体分解了,只用你用的那几个字,相对还不错

    2016-07-25 am9:31回复
  4. avatar#2skypp

    如果你想本地管理iconfont,还可以用GULP工具自己生成,并生成浏览的模板 ,欢迎 star https://github.com/flftfqwxf/gulp-iconfont-css-and-template

    2016-07-06 pm3:39回复
    • avatarbandian @ skypp

      这个门槛就有点高了,像我这种不懂node.js的完全不会用。。。

      2016-07-21 pm3:43回复
      • avatarSkypp @ bandian

        现在用,gulp .已经是标配了吧

        2016-07-21 pm4:39回复
        • avatarbandian @ Skypp

          还别说,对前端的一些东西懂的很少,gulp是你说了才知道的。。。

          2016-07-26 pm6:44回复
  5. avatar#1逗比猪

    楼主请教下,当下载完一个iconfont包在页面引用了,但是少些想要用的图标,又要引进一个iconfont包,,怎么合并这俩个包呢
    楼主请看到解释下,急急急

    2016-06-18 pm11:00回复
    • avatarbandian @ 逗比猪

      如果用两个的话有点麻烦,你可以直接把要添加的图标保存到已有的项目中,然后重新获取代码就好了

      2016-06-18 pm11:48回复
      • avatar逗比猪 @ bandian

        如何使用合并俩个包如何实现可以讲下吗

        2016-06-19 am10:53回复
        • avatarbandian @ 逗比猪

          应该是不能合并,你要用两个项目里的图标的话,那就引用两次CSS

          2016-06-19 am11:24回复
          • avatarfeng @ bandian

            第二次把第一次的都选上,用class或者直接用css的伪元素应该可以,不过阿里的图标库,大小不统一,在实际使用中有点麻烦。

            2016-07-21 pm12:14回复
            • avatarbandian @ feng

              嗯,大小不统一的情况确实有,因为目前我的几个项目中用到的图标都不是很多,踫到有大小不一样的都是先用它的那个编辑工具调整一下大小了再用。

              2016-07-21 pm3:28