欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

使用阿里字体彩色图标

程序员文章站 2024-02-19 00:02:28
...

阿里字体图标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>
相关标签： 字体图标 css js html 前端 svg

上一篇： vue-cli如何对element-ui组件进行二次封装

下一篇： 全局异常处理

推荐阅读