iconfont字体图标的使用方法(marksheng)

本是古典何须时尚 2022-11-09 12:45 226阅读 0赞

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

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

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

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

![3009227b1e9aa9797527286bb820fb54.png][]

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

![7ee04221f164833576f7a1151992fc9c.png][]

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

![554d9775f2e3cbe83c15d7934811f30b.png][]

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

![4acbf0a9fe5c1590f08a277571c87fb7.png][]

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

![91058acfcc98c3161d3375d280e06f59.png][]

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

![33237d80baa7bdc855c4716d557efa20.png][]

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

![432c34bd2ed28a4085b6abb14801126a.png][]

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

![d91c561e4c673a8a3a93f818ed3641a3.png][]

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

![90697a255276623b984a70ba9dc76581.png][]

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

![5b4847645c66c412dad8d26060022ad7.png][]

具体代码如下:

![c3c0e6aa6cbdb68ed84fa0650c9f6e90.png][]

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

![704efb4f00ec54168691ad27ee218fe7.png][]

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

[iconfont_--]: https://www.cnblogs.com/hjvsdr/p/6639649.html
[3009227b1e9aa9797527286bb820fb54.png]: /images/20221023/f7591a18f18f423ca4ea1f8ca9f44f4c.png
[7ee04221f164833576f7a1151992fc9c.png]: /images/20221023/c73cd79889af44dfa3ef3b991a1562ae.png
[554d9775f2e3cbe83c15d7934811f30b.png]: /images/20221023/9b686ad81a4d482f84e8abee8de9f1d0.png
[4acbf0a9fe5c1590f08a277571c87fb7.png]: /images/20221023/40291f09c53c48678b9c3bb74ab265e7.png
[91058acfcc98c3161d3375d280e06f59.png]: /images/20221023/4d697b3fd10641508d43bf5454ced20e.png
[33237d80baa7bdc855c4716d557efa20.png]: /images/20221023/51dad9831c4e4923ba6e03a502559dc2.png
[432c34bd2ed28a4085b6abb14801126a.png]: /images/20221023/b46c400d70214d92a57c025426e2a2c7.png
[d91c561e4c673a8a3a93f818ed3641a3.png]: /images/20221023/690069769ad74509bdefbd9bf8774adf.png
[90697a255276623b984a70ba9dc76581.png]: /images/20221023/7ef352944f914546a5e3734a62192bc4.png
[5b4847645c66c412dad8d26060022ad7.png]: /images/20221023/49de14494f25449aa18ed91b7478b7bf.png
[c3c0e6aa6cbdb68ed84fa0650c9f6e90.png]: /images/20221023/477e16639b51405c9b40c3d2004acd36.png
[704efb4f00ec54168691ad27ee218fe7.png]: /images/20221023/026ae155cfaa4ee1bfa6cf929f98e0a4.png