iconfont的正确使用、引入

最新推荐文章于 2025-02-27 16:00:41 发布

多米尼克领主

最新推荐文章于 2025-02-27 16:00:41 发布

阅读量2.5k

点赞数 3

分类专栏：前端 vscode 文章标签： html5 css3 icons

本文链接：https://blog.csdn.net/qq_42822993/article/details/119462931

版权

前端同时被 2 个专栏收录

21 篇文章

订阅专栏

vscode

12 篇文章

订阅专栏

本文详细介绍了如何引入和使用Iconfont的多色及单色图标，包括从搜索图标、生成链接、本地引入到调整大小的全过程。通过实例代码展示了在HTML中使用SVG和CSS类名的方法，强调了正确引入图标的重要性，并指出图标大小调整可在iconfont.css中修改font-size。文章适合前端初学者，有助于提升项目美观度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Iconfont 图标的引入使用

一、引言

Iconfont 全名阿里巴巴矢量图标库作为为数不多的icon免费平台，iconfont已经成为前端程序员必不可少的组件库库存之一。

虽然说免费，可是并不是说它不好用，相反它好用的不得了呀，只需要一个链接一个标签就能快速使用各式各样的图标，对于我这种啥也不会的初学者来说简直是人间仙境呀！

二、iconfont多色图标引入使用

1.上网站搜索关键词找图标，选几个长得比较顺眼的加入购物车（前提是你已经登入了），这里我一次性选了3个。然后打开购物车，点击加入项目（没有就顺便创一个）
请添加图片描述

2。选择Symbol后点击生成在线链接，然后我们就可以把链接拿到我们的项目中使用
请添加图片描述

3.打开项目用src引入刚刚复制的链接.注意注意！,也许你没发现，复制过来的链接是没有前缀的，需要我们自己加上http也有可能是https。

<script src="http://at.alicdn.com/t/font_2726894_z09q0lgrcl.js"></script>

4.回到砸门的iconfont网站把自己想要的图标的名字复制过来，放到一个SVG标签里去
请添加图片描述

三、完整代码和效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://at.alicdn.com/t/font_2726894_z09q0lgrcl.js"></script>
</head>
<body>
    <!-- icon-xianxingboshimao可以在本地文件的iconfont.css中找到 -->
    <!-- 使用方法：将“#icon-xianxingboshimao”替换成“#icon-xxicon的名字xx” -->
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-shu"></use>
    </svg>
</body>
</html>

请添加图片描述

四、单色图标的引入使用

1.检索关键词

筛选条件加上“单色” 请添加图片描述

2.下载链接

选择一个或两个精美的图标加入购物车
请添加图片描述

来了，坑爹的事情来了，因为分辨率的问题我的“下载代码”被隐藏掉了，？？? ctrl+鼠标滑轮才把分辨率调回来

之前是这样的[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传请添加图片描述

同学提醒才知道，下面还有一个更方便的玩意，点击这个下载代码就可以把你之前选的图标或者字体直接下载到本地
请添加图片描述

直接把它解压复制
请添加图片描述

3.放到项目里本地引入使用

1.打开复制过来文件里的iconfont.css，找到类名
请添加图片描述

2.直接在body中用类名的方式引用

<i class="iconfont icon-fangdajing1"></i>

注意：**类名前面的iconfont不能少，少了就找不到想要的类名

这是效果图
请添加图片描述
.png)]

五、调节大小

直接打开iconfont.css，更改font-size即可
请添加图片描述

六、结语

其实很多第三方组件库都是有使用手册的（出发），只不过有时候会放在不起眼的地方。和我一样眼睛不好使，脾气又倔的人很不友好。iconfont只要用好了，绝对能把你前端项目的美观程度提升一个等级，所以。。。。感谢iconfont，感谢阿里巴巴。哈哈哈哈