iconfont字体图标的使用方法--超简单!

「爱情、让人受尽委屈。」 2022-04-21 16:58 194阅读 0赞

# [iconfont字体图标的使用方法--超简单!][iconfont_--] #

我之前因为项目用bootstrap比较多,所以使用font awesome字体图标比较多,后来接触到了iconfont,发现想要的什么图标都有,还可以自定义图标,非常强大!之前看了一波教程,觉得繁琐,自己弄明白后感觉如此简单,做了这么个简单教程,直接上图,简单粗暴,避免新手走弯路,这里讲解的默认是元素使用类名;

**step 1**:百度iconfont,找到阿里巴巴矢量图标库官网,然后注册登录,或者用github登录也行,此步骤跳过;

**step 2**:找到图标管理->我的项目->然后新建项目:

![1116069-20170329144241217-90300050.png][]

右边点击新建项目,用于保存自己常用的图标;

![1116069-20170329144420608-1650359452.png][]

step 3:项目新建完成后,往项目里添加我们要想使用的图标,找到图标库,搜索一个想要的图标,然后添加到购物车;

![1116069-20170329150632998-1245809314.png][]

我现在将第一个安卓图标加入我的项目,点击加入购物车

![1116069-20170329150732326-1634038174.png][]

step 4:添加到购物车完成后,购物车徽章数字应该显示1了,点击右上角的购物车图标,选择添加至项目,选择我们刚刚创建的项目,确定;

![1116069-20170329151130045-1648103583.png][]

自动跳转到对应的项目里了,如图:

![1116069-20170329151350404-429085098.png][]

step 5:接下来一部比较关键,将打包好的字体文件下载到本地添加到你的项目中,在项目中引用文件中的iconfont.css文件;

![1116069-20170329151602592-2066974689.png][]

下载下来解压后的文件如下:

![1116069-20170329151707108-1534451519.png][]

**强调一次,把上面这些文件都放在一个文件夹内，然后放在你的项目目录中,再在你的项目中引入iconfont.css文件**

![1116069-20170329151958670-208014856.png][]

step 6:到了最后一步了,如何在项目中使用字体图标呢,其实很简单,创建一个i标签或者span标签,添加两个类名,一个固定的是iconfont,另一个是你想要的那个图标对应的类名:

![1116069-20170329152237670-1215394975.png][]

具体代码如下:

![1116069-20170329152326467-952908950.png][]

好了,刷新页面,图标是不是出来了呢?

![1116069-20170329152408233-1551581098.png][]

Ok,到这一步,恭喜你成功了,是不是很简单,不简单?那就从头再看一遍;

**调节字体图标的大小是通过元素的font-size属性来控制的;**

[iconfont_--]: https://www.cnblogs.com/hjvsdr/p/6639649.html
[1116069-20170329144241217-90300050.png]: /images/20220414/2b93c98b82f5475d95e030084251f2b5.png
[1116069-20170329144420608-1650359452.png]: /images/20220414/073f7db5c4b34c6c946b63beef13f96b.png
[1116069-20170329150632998-1245809314.png]: /images/20220414/ec66a62270624bbcb7cf85cb09c14afb.png
[1116069-20170329150732326-1634038174.png]: /images/20220414/6ab75d3c0277496e8e91c77f79a46348.png
[1116069-20170329151130045-1648103583.png]: /images/20220414/3444f2f00b984451babae6900c89d305.png
[1116069-20170329151350404-429085098.png]: /images/20220414/249c0f8073e34be987037c52fa286b09.png
[1116069-20170329151602592-2066974689.png]: /images/20220414/5ca26ead230c45f99abb442b3b1a7faa.png
[1116069-20170329151707108-1534451519.png]: /images/20220414/10c80ac480374793af7369e2c7dc25f2.png
[1116069-20170329151958670-208014856.png]: /images/20220414/970053bb57f14259bf224203044c6c27.png
[1116069-20170329152237670-1215394975.png]: /images/20220414/e034d5d0df6a430a93ee41b5281711e2.png
[1116069-20170329152326467-952908950.png]: /images/20220414/99e694696642479aa75c0614ff15f5f0.png
[1116069-20170329152408233-1551581098.png]: /images/20220414/9f78aa33ab944b61a3b693e320600df4.png