iconfont图标的使用

最新推荐文章于 2024-08-21 15:16:29 发布

weixin_45253306

最新推荐文章于 2024-08-21 15:16:29 发布

阅读量630

点赞数 1

分类专栏：逆战文章标签： html css

本文链接：https://blog.csdn.net/weixin_45253306/article/details/104661693

版权

逆战专栏收录该内容

3 篇文章 0 订阅

订阅专栏

什么是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>