好久没用到阿里巴巴的图标，突然要用到就发现不会用了，只会导出png格式的图标png了= =
1、字体图标
字体图标：可以让我们在页面中实现网页中的简洁图标的效果 — 看起来是图标
-
字体图标的优点
常用的字体图标应该就是阿里巴巴的矢量图库，还有一个一开始学习前端时候用到的IcoMoon（我叫它大眼珠子哈哈哈哈哈）
方法一、本地使用通过类名使用阿里矢量图标
1、把图标添加入库
打开官网，然后找个自己想要的图标
iconfont–阿里巴巴矢量图标库
https://www.iconfont.cn/
然后找到想要的图标，鼠标放上去选【入库】
2、把图标添加到项目
3、下载字体图标
以及一个CSS文件
4、使用文件
我们在对应的HTML文件夹里面创建一个文件夹叫【fonts】，这个fonts要跟images、css等平级
5、在对应的HTML页面上引入css
6、使用字体图标
7、在HTML中通过类名去使用字体图标
这里的字体图标，需要通过两个类名！iconfont 和 对应的字体图标类名，也就是 .icon–xxx
<body>
<i class="iconfont icon-weixin"></i>
<i class="iconfont icon-bofang"></i>
<i class="iconfont icon-qq"></i>
</body>
在使用字体图标的时候，都是使用 i标签，而字体图标的本质是一个文字字体，是可以在css通过font–size这种来修改大小样式的
方法二、通过在线链接使用阿里字体图标
<title>Document</title>
<link rel="stylesheet" href="http://at.alicdn.com/t/c/font_4064327_gs3zto2ml06.css">4、使用字体（同样通过两个类使用，iconfont和icon-xxx）
<body>
<i class="iconfont icon-qq"></i>
<span class="iconfont icon-bofang"></span>
</body>1、这里的 icon–xxx 代码是可以在阿里官网上面复制的
方法三、通过Unicode 使用字体图标
但是，这个Unicode下面会给一个很长很长的css样式，不用鸟他，打开
Fontclass，把在线css引入进去，不要引入unicode给的样式
<title>Document</title>
<link rel="stylesheet" href="http://at.alicdn.com/t/c/font_4064327_gs3zto2ml06.css">
3、把这个代码配合HTML的标签进行使用
<body>
<i class="iconfont"></i>
</body>注意的是：复制的代码是粘贴在标签的内容范围内，同时还需要在标签上声明这是一个字体图标，也就是在上面加上 iconfont类
四、注意事项
在字体图标上，我们习惯使用标签 <i>
但是这个标签的本意是让文本倾斜，但是在引入字体图标后发现并没有倾斜，这是因为在引入的css中添加了不让文本倾斜的样式
font-style:normal;(同时字体图标也可以通过伪类元素去实现，但是我不习惯用伪类（就是记不下来= =））
原文地址:https://blog.csdn.net/qq_63141957/article/details/130641116
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_19283.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
