html引入阿里巴巴图标

最新推荐文章于 2024-05-14 02:27:52 发布

dongsdh

最新推荐文章于 2024-05-14 02:27:52 发布

阅读量5.8k

点赞数 3

分类专栏： css html

本文链接：https://blog.csdn.net/dongsdh/article/details/86503061

版权

css 同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

html

19 篇文章 0 订阅

订阅专栏

前言：

用第三方图标库，我觉得比较方便的就是可以很方便的替换颜色，图标也是矢量的，不会拉伸失真

不用设计人员再单独做雪碧图或其他操作了

1，先搞点事情，在阿里巴巴矢量图标库网站首页，搜索自己想要的图标

https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2

2，搜索之后，每个图标会有添加入库的按钮，最后想要的图标会入库到右上角的小推车

3，刚才点击的添加入库的两个用户小图标已经全部展示出来

一般操作两种方式

3.1，添加至项目（在原来已有的项目中添加这两个小图标，根据提示新建项目。。。）

确定之后

下载至本地的操作和3.2是一样的

3.2，下载代码（直接下载压缩文件，解压后的iconfont.css文件就是我们最终想得到的文件）

4,最后的最后,引用之

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<link rel="stylesheet" href="iconfont.css" />
	<style>
		.box i{
			font-size: 50px;
		}
		.box i.font2{
			font-size: 120px;
			color: red;
		}
	</style>
</head>
<body>
	<div class="box">
		右边这个是矢量图标呢
		<i class="iconfont">&#xe645;</i><br />
		右边这个是换了颜色换了字号的矢量图标呢
		<i class="font2 iconfont">&#xe666;</i>
	</div>
</body>
</html>

3.1的第二张图片，我的项目列表中找到想展示的图片代码放进<i class="iconfont"></i>

效果：

dongsdh

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
2
评论
html引入阿里巴巴图标

前言：用第三方图标库，我觉得比较方便的就是可以很方便的替换颜色，图标也是矢量的，不会拉伸失真不用设计人员再单独做雪碧图或其他操作了1，先搞点事情，在阿里巴巴矢量图标库网站首页，搜索自己想要的图标https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.22，搜索之后，...
复制链接

扫一扫

专栏目录