第一、引入阿里图标库,并解决多个图标重新引入后不显示的情况
1、打开iconfont官网,注册登录。
iconfont-阿里巴巴矢量图标库
2、点击 资源管理>我的项目>新建项目。
点击新建项目
3、项目创建完毕,在上方搜索框中,输入要使用的图标名称,找到需要的图标,右键添加至购物车。
4、点击图标上方购物车>添加至项目,通过右上角购物车查看 ,点击添加至项目
5、此时自动跳转到项目内,图标已经被添加,点击下载至本地。
6、下载后解压后的文件夹,整体复制粘贴至我们的项目目录中
7、在项目中引入iconfont.css文件。
8、下面要使用字体图标,创建一个i标签,添加两个类名:一个是iconfont,一个是字体图标的名字。见图
图标类名可以到图标库 中 选择font class 复制此代码
9、此时,浏览器中已展示出字体图标。还可以通过图标名称设置字体的样式,大小颜色等。(注意:用图标名称的类名去设置样式)
10、添加图标到这里就完成了。如果需要重新添加,更新项目中的图标。继续将需要的图标添加至购物车>添加至项目>点击查看在线链接>复制更新后的代码。
11、点击复制代码,ctrl+A全选,ctrl+c复制,替换掉项目目录中的iconfont.css文件。
此时,iconfont.css样式表更新完毕。继续建一个 i 标签,两个类名,设置样式,刷新页面,就看到图标已经显示。
12、如果图标不生效,打开阿里图标库中创建的项目,点击项目设置
第二、引入彩色图标
1、引入时增加一个js文件
而且在阿里图标里找到symbol,更新代码后,把js代码 ctrl+A全选,ctrl+c复制,替换掉项目目录中的iconfont.js文件。
2、在body中写这样的标签
3、样式需要起类名 而且有一些固定的,可以直接复制
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>阿里字体图标</title>
<!-- 1、引入阿里图标库的css文件和js文件 -->
<link rel="stylesheet" href="./font_4183303_uawonw4stth/iconfont.css" />
<script src="./font_4183303_uawonw4stth/iconfont.js"></script>
<style>
/* 2、设置icon类的样式 */
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
.box {
font-size: 150px;
}
.icon-anquantianchong {
font-size: 50px;
}
</style>
</head>
<body>
<!-- 3、书写下面内容 ,在use标签中 href的值 是 #引入图标的名称 -->
<svg class="icon icon-anquantianchong" aria-hidden="true">
<use xlink:href="#icon-anquantianchong"></use>
</svg>
</body>
</html>
第三步,更快速的引用彩色图标,超级简单
1.打开在阿里图标库创建的项目, 点击项目设置
2.把彩色 勾上 并保存