iconfont图标的使用
什么是iconfont
在学习iconfont如何使用前，首先我们要了解什么是iconfont、iconfont有什么用以及使用iconfont的好处。
iconfont翻译过来就是图标字体，顾名思义就是iconfont显示为图标但实际上却是字体，就像输入法输入“五角星”有的直接可以显示为“☆”一样。
那么这个iconfont有什么用呢，现在iconfont在网页上应用非常广泛，比如下面这张图中红色圆圈标注的图标就是用的iconfont图标。
当然这些图标也可以是图片，但是与使用小图片相比，使用iconfont会有哪些好处呢。首先由于iconfont是以字体的形式来展现图标的，那么大小比图片小很多，网页去加载时也更快速；其次由于是字体，可以通过CSS中的font-size去改变它的大小，color去改变它的颜色，text-align：center使其居中等可以对文字进行的操作，多可以对其使用。
iconfont的使用
使用iconfont之前要了解一个网站：阿里巴巴矢量图标库-iconfont
进入这个网站就可以看到
在输入框输入“购物车”回车之后就会显示和“购物车”相关的图标，挑选自己喜欢的图标后点击“添加入库”（需要先注册），最后点击右上角的购物车。
选择下载代码
将下载好的压缩包放到要使用html文件下，解压缩会得到一个文件夹，我们想要的东西就在这里
点开文件夹后点击“demo_index.html”，会进入一个网页教你如何使用，这里我选择“font-class 引用”
根据指示开始写我们的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入iconfont.css -->
<link rel="stylesheet" href="./font_ogaucyj6g8q/iconfont.css">
<style>
.box{height: 100px;width: 100px;margin: 0 auto;}
/* 给p标签内部文字一个大小和颜色，该样式会作用到图标上 */
.box p{font-size: 40px;color: red;}
</style>
</head>
<body>
<div class="box">
<!-- iconfont为前缀必须要加，icon-gouwucheman为要引用的iconfont名字 -->
<p class="iconfont icon-gouwucheman"></p>
</div>
</body>
</html>
效果是：
这里可以看出大小是我们设置的“40px”，颜色也是红色。
上一篇： Iconfont图标使用 -vue
下一篇： axios创建新的实例