HTML 字体图标的引入

字体图标:简单的说就是1种特殊的字体,通过这种字体,显示给用户的就像一个个图片一样。可以通过css样式改变文字和颜色,使用非常方便。

字体图标引入中,我经常使用

iconfont-阿里巴巴矢量图标库

在这里讲解一下阿里巴巴矢量图标库的使用方法

HTML 字体图标的引入_第1张图片

首先选择自己喜欢的图标加入购物车

 HTML 字体图标的引入_第2张图片

 点击购物车——添加至项目(如果没有项目可以在旁边点击+号新建项目)——点击确定之后会在项目中看到自己需要的图标

HTML 字体图标的引入_第3张图片

 之后点击下载到本地(下载的是zip文件)

 将文件进行解压

 文件里面现在是这个样子的

HTML 字体图标的引入_第4张图片

 我直接将解压活动文件放入了项目文件夹

HTML 字体图标的引入_第5张图片

 HTML 字体图标的引入_第6张图片

  在html 中直接引入iconfont.css 文件,就可以在页面生成字体图标 —效果图如下HTML 字体图标的引入_第7张图片

 

 在iconfonts.css 文件下注意字体图标的路径

 HTML 字体图标的引入_第8张图片

 如果字体图标引入不成功可以尝试更改一下路径  ***

 

 

你可能感兴趣的:(html,前端)