使用阿里字体彩色图标

最新推荐文章于 2024-08-25 11:05:28 发布

原创最新推荐文章于 2024-08-25 11:05:28 发布 · 1.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css #js #html #前端 #svg

字体图标专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了阿里字体图标symbol引用的使用方法，包括其特点、兼容性以及两种引用方式：在线引用和本地引用。同时提供了具体的代码示例，帮助读者理解和应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

阿里字体图标symbol引用

阿里字体图标的使用有三种方式（unicode引用、font-class引用和symbol引用），本文重点讲述symbol引用的方式，网络也有其他的博客讲解了symbol引用的方式，但是都没有效果，今天踩坑了来记录一下。

这种用法其实是做了一个svg的集合

1. symbol字体特点

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

2. 使用方式一（在线引用）

首先要把多色图标放入项目中
【图标在其他地方是不能使用symbol方式的】
复制 symbol链接
【这种方式在本地测试时是无效的，要放在服务器环境使用】

【没有链接时点击生成】
在代码中引入（注意前面加 https:）

<html>
	<head>
	<script src="https://at.alicdn.com/t/xxxx.js" type="text/javascript"></script>
	</head>
</html>

加入通用css代码（引入一次就行）

<html>
	<head>
	<script src="https://at.alicdn.com/t/xxxx.js" type="text/javascript"></script>
	<style type="text/css">
		.icon {
			width: 10em;
			height: 10em;
			vertical-align: -0.15em;
			fill: currentColor;
			overflow: hidden;
		}
	</style>
	</head>
</html>

挑选相应图标并获取类名

【这里的类名不能修改，不然修改后要重新获取在线链接js文件并引入】
在代码中使用图标

<div>
	<svg class="icon" aria-hidden="true">
		<use xlink:href="#icon-weibiaoti-1"></use>
	</svg>
</div>

效果【没有，因为本地演示不了，想看效果往下看】

3. 使用方式二（本地引用）

直接把图标加入购物车
下载代码
把下载下来的压缩包解压，复制里面的 js 文件
粘贴到项目里然后引入

<html>
	<head>
		<script src="icon/iconfont.js" type="text/javascript"></script>
	</head>
</html>

然后后面的步骤跟前面方法一样加入通用css代码（引入一次就行）

<html>
	<head>
	<script src="icon/iconfont.js" type="text/javascript"></script>
	<style type="text/css">
		.icon {
			width: 10em;
			height: 10em;
			vertical-align: -0.15em;
			fill: currentColor;
			overflow: hidden;
		}
	</style>
	</head>
</html>

挑选相应图标并获取类名并在代码中使用图标

<div>
	<svg class="icon" aria-hidden="true">
		<use xlink:href="#icon-weibiaoti-1"></use>
	</svg>
</div>

接下来看效果

【加个背景色并设置字体大小，至于修改字体颜色需要修改svg里的fill属性，不能通过css操作】

<style type="text/css">
	.icon {
		width: 10em;
		height: 10em;
		vertical-align: -0.15em;
		fill: currentColor;
		overflow: hidden;
	}
	
	.attr {
		background-color: #ccc;
		font-size: 18px;
	}
</style>
================================================================================================================================================
<div>
	<svg class="icon attr" aria-hidden="true">
		<use xlink:href="#icon-weibiaoti-1"></use>
	</svg>
	<svg class="icon" aria-hidden="true">
		<use xlink:href="#icon-weibiaoti-1"></use>
	</svg>
</div>