威言威语
我愿像茶,苦涩留心,清香予人。
威言威语
当前位置: 首页 > 设计 > 正文

字体图标iconfont使用体验

最近将博客上面的小图标都换成了阿里的iconfont字体图标,在替换字体图标的时候我主要体验了Font Awesome和iconfont。本来想使用Font Awesome,它的免费版中有些我想要的图标没有,Pro版虽然多了很多,但是还不全,远没有使用iconfont来的随意,不过Font Awesome搭配了CSS框架,可以更加方便的使用一些css效果,比如:动画、旋转与翻转、组合使用等。总的来说Font Awesome适合快速使用,iconfont适合DIY。
字体图标iconfont使用体验

最近将博客上面的小图标都换成了阿里的iconfont字体图标,其实很早之前就想换了,一直偷懒就没有去改。

当真正使用了之后发现,真香!iconfont上有海量的图标,替换图标也非常方便,现在也支持彩色字体图标了。

在替换字体图标的时候我主要体验了Font Awesome和iconfont。本来想使用Font Awesome,它的免费版中有些我想要的图标没有,Pro版虽然多了很多,但是还不全,远没有使用iconfont来的随意,不过Font Awesome搭配了CSS框架,可以更加方便的使用一些css效果,比如:动画、旋转与翻转、组合使用等。总的来说Font Awesome适合快速使用,iconfont适合DIY。

iconfont使用也比较方便,主要以unicode方式引用举例,创建一个项目,选择你需要的图标添加入库到对应的项目里面,生成对应的font-face,然后就可以愉快的使用起来了。默认生成的font-face不支持IE8及以下浏览器,可以在项目设置的字体格式里面把EOT勾上。

第一步在css文件里面引用生成的font-face


@font-face {font-family: 'iconfont';
    src: url('iconfont.eot'); /* IE9 */
    src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('iconfont.woff') format('woff'),
    url('iconfont.ttf') format('truetype'),
    url('iconfont.svg#iconfont') format('svg');
}

第二步:定义使用iconfont的样式


.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;
	font-style:normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	}

第三步:挑选相应图标并获取字体编码,应用于页面


<i class="iconfont">&#xe65e;</i>

最后能在页面展示下图的效果。

iconfont图标效果

在实际使用中,有些图标不是直接放到页面上的,而是类似background方式放到页面上的。这个时候就可以使用font-class方式来展示这些字体图标。

在2011年的时候写过一篇文章《JQuery+CSS实现分类菜单前面不同的图标》和demo,是通过JQuery和CSS配合在展示不同图标的,这里使用iconfont就非常简单了,通过伪类的方式展示图标,在元素之前或者元素之后加上一些内容,可以查看使用iconfont来实现的demo

Html代码:

<div class="menu">
	<ul class="nav">
<li class="page_item home"><a href="https://www.weisay.com/blog/">首页</a></li>
<li class="page_item page-item-1"><a href="https://www.weisay.com/blog/about/">关于</a></li>
<li class="page_item page-item-2"><a href="https://www.weisay.com/blog/archives/">归档</a></li>
<li class="page_item page-item-3"><a href="https://www.weisay.com/blog/guestbook/">留言</a></li>
<li class="page_item page-item-4"><a href="https://www.weisay.com/blog/link/">链接</a></li>
	</ul>
</div>

同样引用生成的font-face。


@font-face {font-family: 'iconfont';
    src: url('iconfont.eot'); /* IE9 */
    src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('iconfont.woff') format('woff'),
    url('iconfont.ttf') format('truetype'),
    url('iconfont.svg#iconfont') format('svg');
}

根据实际情况重新定义iconfont的样式


.page_item:before {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color:#444;
}

使用:before配合content,在元素之前加上图标的unicode编码,注意content里面引用的内容,比如Unicode编码是 &#xe65e; 他用&#x后面的4个字符 \e65e


.home:before{content: "\e65e";}
.page-item-1:before{content: "\e60e";}
.page-item-2:before{content: "\e9c0";}
.page-item-3:before{content: "\e605";}
.page-item-4:before{content: "\e606";}

最后

:before 和 :after算是很常用的伪类了,有时候我也会经常看到 ::before 和 ::after 这样的写法。

虽然效果好像差不多,但声明不同,伪类和选择器之间用一个冒号隔开,伪元素则是两个冒号隔。

伪类和伪元素的区别

伪类和伪元素都是为了给一些特殊需求加样式,定义上基本一致。
伪类像类选择器一样给已存在某个元素添加额外的样式;伪元素则是给自己虚拟的元素添加样式。
:before和::before 与 :after和::after 写法是等效的。
:before/:after 是Css2的写法,::before/::after 是Css3的写法。
:before/:after 的兼容性要比 ::before/::after 好。

所以IE8及以上能支持 :before/:after 但IE8就不支持 ::before/::after 了,当然如果不需要IE8支持,就用双冒号(::)吧。

演示地址:

您可能还会对这些文章感兴趣!

字体图标iconfont使用体验:目前有 27 条评论

  1. ejsoon
    11楼
    ejsoonGoogle Chrome 107.0.0.0 Android 6.0.1

    不知js如何定義偽類?

    2023-09-09 11:32 回复
    • William
      WilliamGoogle Chrome 116.0.0.0 Windows 11

      @ejsoonjs定义伪类?
      是用js来替换css的伪类值吧,这种还是比较多。

      2023-09-09 20:56 回复
  2. 左手拨弦
    10楼
    左手拨弦:Google Chrome 102.0.0.0 Windows 11

    阿里的iconfont确实挺好用,自定义自己需要的,也不浪费。

    2023-02-23 18:59 回复
  3. 未命名
    9楼
    未命名:搜狗高速浏览器 Windows 7

    博客没用几个图标,直接用SVG,不喜欢集成太多

    2022-03-10 20:58 回复
    • William
      WilliamFirefox 98.0 Windows 10

      @未命名图标不多确实没有集成的必要,不过iconfont好处就是,只需整合自己需要的图标,不用像Font Awesome一样不管用几个图标都要集成他一套。

      2022-03-11 10:07 回复
  4. 阿哲
    8楼
    阿哲:Google Chrome 96.0.4664.110 Windows 10

    哈哈,又开始研究新的东西了。

    2021-12-30 12:08 回复
    • William
      WilliamFirefox 95.0 Windows 10

      @阿哲人还是要学习,接触新的事物,不然很容易退步。

      2022-01-05 14:42 回复
  5. 橘子书
    7楼
    橘子书:Microsoft Edge 96.0.1054.62 Windows 10

    这个引用方法是基础玩法,其实它可以像Font Awesome一样的。
    大佬又更新主题了?

    2021-12-28 08:30 回复
    • William
      WilliamFirefox 95.0 Windows 10

      @橘子书基础玩法已基本够用了,想彩色图标的使用symbol 引用模式。Font Awesome单纯使用起来确实比较方便,人家都封装集成好了。
      主题就换换图标,改改细节。

      2021-12-28 10:32 回复
      • 橘子书
        橘子书:Microsoft Edge 96.0.1054.62 Windows 10

        @William也对,简单就够。
        其实博客越到后面,小改是乐趣!

        2021-12-28 12:15 回复
  6. sys
    6楼
    sys:Firefox 97.0 Windows 10

    真不错啊小威 主体整体美化了很多细节 weisaybox 也来更新一下 :lol:

    2021-12-26 13:32 回复
  7. 亮娃子
    5楼
    亮娃子:vivo浏览器 10.5.17.1 Android 11

    厉害了,阿里图标库确实挺多的

    2021-12-22 07:59 回复
  8. Jeff
    4楼
    JeffMicrosoft Edge 96.0.1054.43 Mac OS X  10.15.7

    我自己更倾向需要用几个就集成几个,字体更小一些。

    2021-12-21 20:05 回复
    • William
      WilliamFirefox 95.0 Windows 10

      @Jeff是的,自己用也就那么10几20来个图标,集成起来生成文件小,加载快一点。

      2021-12-23 16:58 回复
  9. Lvtu
    地板
    LvtuSafari 15.2 Mac OS X  10.15.7

    现在的主题刚用时就集成了Font Awesome,现在也难得改了!
    不过我网站Logo用的就是iconfont,确实好用!

    2021-12-20 10:25 回复
    • William
      WilliamFirefox 95.0 Windows 10

      @LvtuFont Awesome也是不错的,我整了个pro研究了一下,毕竟是国外的,国内的品牌图标就很少。不过单纯使用里面的基本图标还是比较方便的。

      2021-12-21 14:55 回复
      • Lvtu
        LvtuSafari 15.2 Mac OS X  10.15.7

        @William嗯,国内品牌图标是比较少,貌似图标可以提交申请的,不过现有的一般的网站够用了!

        2021-12-22 18:49 回复
        • William
          WilliamFirefox 95.0 Windows 10

          @Lvtu本来想把评论显示浏览器和操作系统的图标都换了的,我自己已经在那个插件上补充了很多偏门一些的浏览器图标了,就没办法弄到那么多的浏览器的字体图标了。

          2021-12-23 17:05 回复
          • Lvtu
            LvtuSafari 15.2 Mac OS X  10.15.7

            @William难得看到你又开始折腾主题了,不过灰色背景评论最后一条背景下面好像有点小问题(和评论框底部对齐了)。。。

            2021-12-23 19:22 回复
            • William
              WilliamFirefox 95.0 Windows 10

              @Lvtu哈哈,火眼金睛啊,确实有点问题,刚刚调整了一下,应该正常了。或者苹果电脑显示效果好,比较容易看到,Windows下我还寻找了一番。 :lol:

              2021-12-24 10:40 回复
  10. ChengNan
    板凳
    ChengNan:Microsoft Edge 96.0.1054.62 Windows 10

    我的也用上了几个,确实比较方便。

    2021-12-19 22:30 回复
  11. 黑桃三
    沙发

    厉害了。我用的主题集成了几个图标库,省得折腾了

    2021-12-18 19:21 回复

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

gravatar

question razz sad smile redface biggrin eek shock confused cool lol mad rolleyes wink cry