iconfont的使用

喜欢马爸爸给程序员所做的所有贡献，前端开发中，iconfont给我们带来了很大的方便，很优秀的体验。今天我们一起来学习iconfont的使用。

1 iconfont官网地址 点击进入官网，登录我们自己的账号。

2

点击我的项目，选择新建自己的项目。

根据要求完善项目的基本资料，成功以后我们就可以浩瀚的图标库去挑选适合我们的图标了，尽可放心，总有一款适合你。

3 我们随意点进去官方推荐的图标库，或是自己搜索需要的图标，鼠标滑过

  点击上面的购物车，既可以把我们需要的图标加入到我们的购物车中。

4 选好图标以后，点击右上角的购物车按钮，我们就可以在购物车里看到我们选定的图标，点击下面的添加至项目，这样我们需要的图标，就进入到我们的项目中了。

点击下载至本地，我们把下载好的本地字体文件加入到我们的项目中，我们就可以使用了。

这是下载本地文件所包含的所有文件，我们实际使用中只需要其中的一部分，其中的html文件，里面包含有具体使用iconfont的方法，傻瓜式的教程，一看就会。

1 Unicode     <span class="iconfont">&#x33;</span>

2 Font class  <span class="iconfont iconxxx"></span>

3 Symbol   <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-xxx"></use> </svg>

 

这是我们需要的五个字体文件，我们在引入iconfont.css文件的时候，注意如果iconfont.css和其他四个文件不在一个目录下，注意修改iconfont.css文件里面的文件引用路径。