iconfont小图标从下载到引入到vue项目中的详细教程

地址：iconfont-阿里巴巴矢量图标库

 iconfont小图标下载：

 （1）查找图标 

• 在搜索框直接文字搜索或者看下面的小图标库，找想要的，每个小图标库都有一个名字，比如：“阿里云官网”，就可以根据这个名字去找。

（2）将图标加入购物车

• 找到图标后，把鼠标放在它身上，点“加入购物车”，然后再去找其他的，都依次加入购物车，最后一起结算。

（3）点击购物车，添加至项目

（4） 新建项目

• 每次新选图标都放在一个新的项目下，不能放在以前的项目下；
• 没有项目就新建项目，不能添加到以前用过的项目，这样就会把你现在的图标和以前的图标放在一个项目下，待会下载的时候就会把整个项目图标全下载了，但是我们也用不着呀。

（5）下载至本地

下载好的文件：

---

引入到项目中： 

• 两种方式：一种是引入到public目录下、第二种是引入到assets目录下
• 要引入的是css文件

 

方法一：引入到public目录下

（1）把下载好的font文件夹放在项目的public文件夹下

• public里面的文件都可以通过 “/” 在浏览器访问； 

• 比如说在浏览器访问public文件夹下的font文件里的iconfont.css文件：直接在浏览器上输入你服务器域名和端口号然后通过 “/font_3804036_25tjkk6pqt8/iconfont.css” 来访问：

 （2）引入到项目中

• 在public里的index.html中引入css文件

方法二： 引入到assets目录下

 （1）把font文件放在项目里src文件夹下的assets文件夹中

• 放在src文件夹里的都是按照模块化的方式来的，就是上下级关系，所以引入文件都要按照import模块化的导入方式：
• 比如导入到一个vue文件中

结果：

 

---

使用css样式：

• 先右键将font文件夹下的html文件打开，里面有引入用法说明：

• 有三种引入方式，用Font  class最方便，引入方式是<link>方式，每个图标下面的icon是我们待会要引入的class属性：

使用class属性，用 span标签和 i 标签 都可以 ：

• 你要用哪一个小图标，就把小图标下面的“icon属性”复制过来放在这个绿色框里，例如我绿色框里放的是电影的小图标代码 

结果：

---

控制小图标的属性： 

把这种小图标当做一个字体就可以了，那就可以设置大小和颜色等属性：

• 控制全部小图标的属性：用标签选择器选就行了：

    <style>
        i{
            font-size: 20px;
            color: red;
        }
    </style>

• 控制单个小图标的属性： 

<style>
        i.icon-dianyingpiaoiocn{
            font-size: 20px;
            color: red;
        }
</style>