HTML 字体图标如何使用

什么是字体图标？

• 京东网站的小三角

• 小米网站的购物车

去一些网站下载一些自己要用的图标 ，推荐去阿里的（https://www.iconfont.cn/）

下载代码，完成之后解压打开index.html

在下面会教怎么使用

首先是声明字体

其次就是这样

span 里面的代码要根据你下载代码里面的参考
这是我下载的，比如

打开并没有效果，检查下路径

我的文件是放在了fonts里面

而代码

    @font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
      url('iconfont.woff2') format('woff2'),
      url('iconfont.woff') format('woff'),
      url('iconfont.ttf') format('truetype'),
      url('iconfont.svg#iconfont') format('svg');
}
注意了哈，url是直接写的，所以根据我的情况，在url前面都加上fonts/

有了，还可以自己修改大小以及颜色等

span{
    font-family:iconfont;
    font-size:312px;
    color: red;
}

效果：

注意事项：

如果没有字体是一个方块的话，首先检查下文件有没有放进来，其次就是声明字体时文件的路径是否正确。

如果想深入了解icon图标的话，建议访问这篇文章。