图标字体的使用

目录

什么是图标字体

图标字体如何引用

1.什么是图标字体

我们在做项目的时候经常会遇到一些文字旁边有各种图形的情况，如下

 既能调整大小 也能改变颜色，这种图形就是我今天要分享的图标字体，图片是达不这种效果的，虽然能调整大小，但是不能改变颜色。

像我们日常寻找图标字体，一般都是在阿里巴巴矢量图标库，这个网站里收集了两千多万的图标，所以完全能应付我们平时做项目时需要的图标，而且还是免费的哦。我把网址放在这里，大家可以收藏一下。iconfont-阿里巴巴矢量图标库

2.图标字体如何引用

既然图标字体使用起来比较方便 那我们如何引用它呢，接下来我就来跟大家分享一下。

首先去图标库寻找我们需要的字体图标，比如我搜索一个天气

就会出现很多很多关于天气的图标，接下来随便选择一个 放进购物车  

然后右上角就会出现

点击，添加至项目

可以自己取个项目名 我已经取好了 叫demo，然后会来到这个界面

 因为我这里之前生成了代码，所以是这样显示 大家之前没有生成代码的  可以点一下生成代码

然后点复制代码 然后到html head里面用link链接进去

注意： 最好把代码前面的https:补全，这样可能不会出错

图标字体的样式引进来了，我们现在就可以用了，注意看我的示例

 引进的图标字体我们一般用i标签包裹，当然也可以用span或者其他的标签，没有强制，然后class="iconfont"是固定写法 每个图标字体都是一样 再然后我们到我们复制代码那个网页去复制图标字体的代码 放到iconfont后面 一定要有个空格

这样我们就完整的吧图标字体引进来了，然后我们就可以修改这个图标字体的样式了，大家学会了吗？