字体图标的用法

Posted 2020-09-09 蓝度飞

　　第一次听说字体图标--iconfont，感觉是：哇，好高大上的样子，会不会很难啊。然而当真正去用的时候，才发现，网上的字体图标库为我们做了太多工作，我们只需要傻瓜式的挑选自己需要的图标，傻瓜式的复制粘贴就可以将各种的小图标以字体的方式加入到我们的页面中了。

　　本文为大家讲述的是如何使用阿里巴巴字体图标库：

　　第一步：在百度或其他搜索引擎中搜索“iconfont”，如果是百度的话，应该第一条搜索结果就是“Iconfont-阿里巴巴矢量图标库”。

　　第二步：点击进入“Iconfont-阿里巴巴矢量图标库”。网站中央有一个搜索框，想要使用什么图标，直接输入拼音、中文词或英文单词即可（建议使用前先进行注册或第三方登陆）

　　第三步：假设输入了“shezhi”，这时，页面中出现了很多的“设置”小图标，当鼠标移入想要使用的图标时，图标上会出现一个黑色透明的遮罩，遮罩中有三个选项（加入购物车、收藏、下载）。

　　第四步：点击加入购物车，然后在搜索中继续输入想要使用的下一个图标，然后选择想要的图标加入购物车，当所需图标全部选好并加入购物车后，点击页面中的购物车图标（这个图标上有一个数字，表示用户添加了几个图标）。

　　第五步：点击购物车图标后，会在页面右侧出现一个侧边栏，点击其中的添加至项目，这时，会看到一个“加入项目”的字样，可以加入之前写好的项目，也可以点击旁边的加号，重新新建一个项目，并填入新项目的名字。

　　第六步：添加至项目后，页面跳转到“我的项目”，这里，我们说一种简单的用法，直接点击“下载至本地”，然后把下载好的文件解压，放入到我们正在完成的项目中，页面中引入下载好的“iconfont.css”。

　　第七步：哪个地方想要添加图标，只需要加上一个空标签，空标签上写入两个类名即可，两个类名是“iconfont”和图标名字对应的那个类名。

 

　　完成上述七个步骤，则可以向页面中加入字体图标。

　　PS：本文只是单纯的讲述如何引入阿里巴巴字体图标，若由于使用阿里巴巴字体库引发纠纷与本文无关。