Font Awesome:图标字体很类似,不过Iconfont字库图标更多的是阿里、淘宝商品等图标。
  说了这么多,我们如何来使用Iconfont字库呢?
  1、声明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'), /* chrome、firefox */
     /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('iconfont.ttf') format('truetype'),
    url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}

  2、定义使用iconfont的样式

.iconfont{
    font-family:"iconfont";
    font-size:16px;
    font-style:normal;
}

  3、挑选相应图标并获取字体编码,应用于页面

<i class="iconfont">&#33</i>
  Iconfont字库也支持在Android、IOS系统上使用,效果和PC端一样出色,可以参见http://www.iconfont.cn/help/iconuse.html文章的介绍使用,这里就不复制粘贴了。
本博客文章除特别声明,全部都是原创!
原创文章版权归过往记忆大数据(过往记忆)所有,未经许可不得转载。
本文链接: 【阿里巴巴矢量图标库:Iconfont】(https://www.iteblog.com/archives/1272.html)
喜欢 (27)
分享 (0)
发表我的评论
取消评论

表情
本博客评论系统带有自动识别垃圾评论功能,请写一些有意义的评论,谢谢!