阿里图标库iconfont如何使用

最新推荐文章于 2024-07-26 15:20:45 发布

张萌2018

最新推荐文章于 2024-07-26 15:20:45 发布

阅读量8.6k

点赞数 3

分类专栏：理论

本文链接：https://blog.csdn.net/MengRui2333/article/details/82709031

版权

理论专栏收录该内容

38 篇文章 0 订阅

订阅专栏

1、在阿里图标库（http://iconfont.cn/）选择自己喜欢的一个或多个图标，效果如下图所示

2、网页右上角的小购物车，

3、这里我们选择下载代码。下载好了后在项目需要的地方解压。

4、这是我下载好的压缩文件以及解压后的文件。

5、下载好了以后，会看到有三个html文件，我们用浏览器打开，他是三种引入图标的方法，我们根据自己的需要自行选择。

6、举例子来说，我个人喜欢用

新建一个文件夹，名字自己取吧！我的叫font，放入这四个文件。与font平级的放iconfont.css

html中的style：

.iconfont{ color: blue; }
           @font-face {
           font-family: 'iconfont';
           src: url('font/iconfont.eot');
           src: url('font/iconfont.eot?#iefix') format('embedded-opentype'),
           url('font/iconfont.woff') format('woff'),
           url('font/iconfont.ttf') format('truetype'),
           url('font/iconfont.svg#iconfont') format('svg');
           }
           .iconfont{
           font-family:"iconfont" !important;
           font-size:16px;font-style:normal;
           -webkit-font-smoothing: antialiased;
           -webkit-text-stroke-width: 0.2px;
           -moz-osx-font-smoothing: grayscale;
           }

body中

这些图标都可以当成font来处理，改颜色大小之类的，都和文字一样。