iconfont矢量图标库的引用方法

最新推荐文章于 2024-02-05 14:09:20 发布

code_mo

最新推荐文章于 2024-02-05 14:09:20 发布

阅读量2.4k

点赞数 4

分类专栏：前端文章标签： HTML iconfont引入方法

本文链接：https://blog.csdn.net/weixin_43441790/article/details/96582122

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

iconfont引用方法
iconfont在一次做PPT的过程中的知道的一个设计常用的网站，进过一番的了解和学习，发现它是国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。是阿里巴巴体验团队倾力打造，设计和前端开发的便捷工具。

1.登录/注册账号

iconfont支持GitHub、阿里域账号(仅限阿里员工)、新浪微博三种账号登录。直接登录即可。

2.选择你想用图标并将它加入购物车

在这里插入图片描述
加入购物车之后你可以将它加入到你项目中去，也可以直接下载.png文件（此种方式一般为UI设计时用）

引用图标可有三种方式：Unicode、Font class、Symbol。

三种方式各有缺点，下文从这三种方式的优点、缺点和使用方法说起.

1.unicode方式:

unicode是字体在网页端最原始的应用方式
优点：

兼容性最好，支持ie6+，及所有现代浏览器。
支持按字体的方式去动态调整图标大小（font_size），颜色(font-color)等等。

缺点:

因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。
使用方法:
将下载好的iconfont图标的文件放到工程文件夹的目录下;
在代码中link进来,如果是小白注意路径的问题，如下;

<link rel="stylesheet" type="text/css" href="iconfont/unicode/iconfont.css"/>

// An highlighted block
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>unicode引用方法</title>
		<link rel="stylesheet" type="text/css" href="iconfont/unicode/iconfont.css"/>
		<style type="text/css">
			.iconfont{
				font-size: 500px;
				color: red;
			}
		</style>
	</head>
	<body>
		<i class="iconfont">&#xe77d;</i>   <!--class="引入Unicode文件里面.css的文件名"，
												&#xe77d 是iconfont.css文件里面.icon-check-circle:before样式content的值-->
	</body>
</html>

可以通过style样式的修饰，效果如下:
在这里插入图片描述

2.symbol方式

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：

支持多色图标了，不再受单色限制。
通过一些技巧，支持像字体那样，通过font-size,color来调整样式。
兼容性较差，支持 ie9+,及现代浏览器。
浏览器渲染svg的性能一般，还不如png。

第一步：引入项目下面生成的symbol代码：

<script src="iconfont/symbol/iconfont.js"></script>

第二步：挑选相应图标并获取类名，应用于页面：

<svg class="icon-play">
          <use xlink:href="#icon-play"></use>
       </svg>

第三步：稍微加一点样式

<style type="text/css">
			.icon-play{
				font-size: 200px;
				fill: currentColor;
				color: red;
			}
			</style>

效果如下;
在这里插入图片描述

2.Font-class方式

Font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。
与unicode使用方式相比，具有如下特点：

兼容性良好，支持ie8+，及所有现代浏览器。
相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。
因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。
不过因为本质上还是使用的字体，所以多色图标还是不支持的。

直接上代码，以及效果图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>fontclass用法</title>
		<link rel="stylesheet" type="text/css" href="iconfont/fontclass/iconfont.css"/>
		<style type="text/css">
			.icon-smile{
				font-size: 400px;
				color: skyblue;
			}
		</style>
	</head>
	<body>
		<i class=" iconfont icon-smile"></i>  <!--iconfont icon-smile 为引入图标的文件名-->
	</body>
</html>

效果如下;
在这里插入图片描述

code_mo

关注

4
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
iconfont矢量图标库的引用方法

在HTML中引入iconfont矢量图标库的方法iconfont在一次做PPT的过程中的知道的一个设计常用的网站，进过一番的了解和学习，发现它是国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。是阿里巴巴体验团队倾力打造，设计和前端开发的便捷工具。1.登录/注册账号iconfont支持GitHub、阿里域账号(仅限阿里员工)、新浪微博三种账号登录。直接...
复制链接

扫一扫