阿里字体图标库iconfont的使用详解

qq_46234563

已于 2022-03-21 12:03:49 修改

阅读量3.5k

点赞数 1

文章标签：前端

于 2022-03-21 12:02:41 首次发布

本文链接：https://blog.csdn.net/qq_46234563/article/details/123630529

版权

本文详细介绍了如何使用Fontclass、Unicode和Symbol三种方式来集成和使用图标库。通过步骤演示，包括添加图标到项目、生成和引入样式文件、以及在HTML中应用图标的方法。同时，提到了如何实现彩色图标效果和在不同场景下的应用。

摘要由CSDN通过智能技术生成

一、Font class方式的使用？

选择你要添加的图标到购物车

2. 点击右上角购物车按钮，新建项目并把图标添加到项目

3. 点击上方我的资源进入我的项目cv在线链接到url地址栏

4. 在目录文件夹下新建iconfont.css文件将下面代码cv进去

在这里插入图片描述

5. 导入iconfont.css文件，并使用

在这里插入图片描述
PS：
iconfont的class是必须写的后面的class是你要使用的图标的class类名，如下图中文下面的类名就是了

打开浏览器效果如下
在这里插入图片描述

二、unicode方式的使用

unicode方式和font class方式大同小异
只需要复制相应的字符到对应位置即可
在这里插入图片描述

效果图：

PS:
如果想要彩色的效果只需要在项目设置里面字体格式设置成彩色，在重新更换iconfont.css里面的代码即可啦

效果图：

三、Symbol方式的使用

在这里插入图片描述
点击链接进入，复制里面的代码到新建的iconfont.js里面，在要使用的页面里面引入，在use标签里面使用即可。

<!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>
  <link rel="stylesheet" href='./iconfont.css'>
  <script src="./iconfont.js"></script>
</head>

<body>
  <span class="iconfont icon-cunchu">&#x100ab;&#x100ab;&#x100ab;</span>
  <input class="iconfont" type="text" value="&#x100ab;">
  <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-bofang"></use>
  </svg>
  <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-cunchu"></use>
  </svg>
</body>


</html>