CSS之iconfont导入方式

最新推荐文章于 2024-07-05 16:58:42 发布

richeneen莳姼

最新推荐文章于 2024-07-05 16:58:42 发布

阅读量5k

点赞数 4

文章标签： css 前端 javascript html

本文链接：https://blog.csdn.net/weixin_53027472/article/details/125914929

版权

本文详细介绍了如何通过阿里巴巴iconfont导入CSS图标，包括font-class和Unicode两种引入方式，以及彩色图标的引入步骤。同时，还提供了更改图标样式的示例。

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

一、阿里巴巴iconfont导入方式

阿里巴巴iconfont 网址：https://www.iconfont.cn/
在这里插入图片描述

方法一：font-class引入

在图标库中找好自己想要的目标icon，添加至购物车，最后把购物车的图标添加进项目里
在这里插入图片描述

选择新建一个项目存放，如果已有项目，可以不创建

来到项目中，选择下载至本地

下载成功后，将解压后的压缩包放入项目文件夹下：

在html文档的头部中引入外部iconfont.css，然后挑选相应图标并获取类名，应用于页面：

在这里插入图片描述

<!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>
    <!-- 第一步：导入外部iconfont.css文件-->
    <link rel="stylesheet" href="../download/iconfont.css">
</head>
<body>
    <!-- 第二步：写入类名，切记iconfont一定要写  -->
    <i class="iconfont icon-a-1-daibanshenpi"></i>
</body>
</html>