在线使用iconfont字体图标

FreeZinG 发布于2019-08-05 16:53 / 1342人阅读

摘要：支持按字体的方式去动态调整图标大小，颜色等等。与使用方式相比，具有如下特点兼容性良好，支持，及所有现代浏览器。相比于语意明确，书写更直观。不过因为本质上还是使用的字体，所以多色图标还是不支持的。

使用阿里巴巴矢量图标库

用前准备

在线使用案例

三种使用方式介绍

vue项目(本地)使用iconfont字体图标

使用准备

进入阿里巴巴矢量图标库，登陆以后，搜索需要的图标，然后点击添加入库

进入“我的图标库”（右上角购物车），点击添加至项目

点击 + 图标创建一个新项目，然后把新图标加入到新项目中。(也可以按需添加到已有项目)

进入我的项目，即可看到如下界面

三种使用方式介绍 unicode引用

unicode是字体在网页端最原始的应用方式，特点是：

兼容性最好，支持ie6+，及所有现代浏览器。

支持按字体的方式去动态调整图标大小，颜色等等。

但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。

注意：新版iconfont支持多色图标，这些多色图标在unicode模式下将不能使用，如果有需求建议使用symbol的引用方式

unicode使用步骤如下：

拷贝项目下面生成的font-face

@font-face {font-family: "iconfont";
    src: url("iconfont.eot");
    src: url("iconfont.eot?#iefix") format("embedded-opentype"),
    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;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}

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

font-class引用

font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。

与unicode使用方式相比，具有如下特点：

兼容性良好，支持ie8+，及所有现代浏览器。

相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。

因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。

不过因为本质上还是使用的字体，所以多色图标还是不支持的。

使用步骤如下：

拷贝项目下面生成的fontclass代码：

//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css

挑选相应图标并获取类名，应用于页面：

symbol引用

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。这种用法其实是做了一个svg的集合，与上面两种相比具有如下特点：

支持多色图标了，不再受单色限制。

通过一些技巧，支持像字体那样，通过font-size,color来调整样式。

兼容性较差，支持 ie9+,及现代浏览器。

浏览器渲染svg的性能一般，还不如png。

使用步骤如下：

拷贝项目下面生成的symbol代码：

//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js

加入通用css代码（引入一次就行）：

挑选相应图标并获取类名，应用于页面：

在线使用

点击生成代码

完整使用代码





    
    iconfont使用
    
    

    

    
    



    
         Unicode
         Font class
        
            
            Symbol

使用效果如下：

idc机房托管混合云 iconfont使用字体图标图标字体图标字体库

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/59265.html

iconfont的使用方法(更新了一些内容）

摘要：方式和方式是极其相似的，只不过他们一个用的是图标的字体编码，一个用的是图标的引用而已是使用了引用的类名，可在下载的中查看，或者可以在阿里矢量图标库的网站上，进入我的项目查看。字体图标iconfont阿里官网传送门： http://www.iconfont.cn/打开首页的小图标好漂亮哦1）showImg(https://segmentfault.com/img/bVbghOc?w=1...

tianlai 2019-08-23 11:39 评论0 收藏0
iconfont实践小结

摘要：所以实现小图标时雪碧图跟图标字体会在一个网站共存，自定义图标字体为什么比较耗时，且太复杂图标无法实现请往下看开发流程就了解了。参考资料细谈浅谈图标字体向下兼容优雅降级技术绘制小图标技巧雪碧图图标字体矢量小图标设计本文对应源码源码地址演示地址 showImg(https://segmentfault.com/img/bVRnAC?w=431&h=220); 之前写了一篇关于雪碧图的博文，...

bitkylin 2019-08-29 13:00 评论0 收藏0
iconfont.cn 阿里出品的矢量图标库

摘要：是阿里巴巴推出的矢量图标库，其中涵盖了多个常用图标，并在持续更新中。目前已有图标，部分图标为用户上传，因此默认不公开，但是可以搜索到。下载图标制作模板图标制作规范项目主页编撰 Iconfont.cn是阿里巴巴推出的矢量图标库，其中涵盖了1000多个常用图标，并在持续更新中。（目前已有7000+图标，部分图标为用户上传，因此默认不公开，但是可以搜索到。） showImg(http://...

wangtdgoodluck 2019-06-25 13:50 评论0 收藏0
iconfont.cn 阿里出品的矢量图标库

摘要：是阿里巴巴推出的矢量图标库，其中涵盖了多个常用图标，并在持续更新中。目前已有图标，部分图标为用户上传，因此默认不公开，但是可以搜索到。下载图标制作模板图标制作规范项目主页编撰 Iconfont.cn是阿里巴巴推出的矢量图标库，其中涵盖了1000多个常用图标，并在持续更新中。（目前已有7000+图标，部分图标为用户上传，因此默认不公开，但是可以搜索到。） showImg(http://...

刘厚水 2019-06-24 18:45 评论0 收藏0
iconfont，像使用字体一样使用图标

摘要：，从字面上就能理解它就是字体，让开发者像使用字体一样使用图标。制作生成需要矢量图。阿里巴巴矢量图标库和提供大量优秀的矢量图。这是一个文件，每一个标签对应一个矢量图标，包含它对应的代码和名称。在iOS项目中，一般对图片资源要求有@2x，@3x两套，以适配不同分辨率的设备。对于有换肤需求的APP来说，还需要多套图来匹配不同的主题。这样不但无形中增加了开发者和设计者的工作量，而且会增大AP...

dunizb 2019-06-25 14:53 评论0 收藏0