阿里字体图标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>

使用阿里字体彩色图标相关推荐

添加阿里矢量彩色图标
引入阿里彩色图标在引入普通图标的基础上,如下 1.以此"项链"为例 2.添加入库(购物车),下载代码 3.解压下载包,打开demo.html,找到原类名,写入html需要添加图标的 ...
项目oms之----阿里巴巴字体图标运用详解 (含：彩色图标svg运用)
思路: 1.找到你需要的阿里巴巴字体图标,添加到公司字体图标阿里巴巴库,----> 刷新该icon所在的阿里巴巴css文件在线链接 2.在项目中新建一个字体图标css文件 inconfo ...
手把手教你如何在项目中使用阿里字体图标IconFont
阿里图标官网地址:IconFont-阿里巴巴矢量图标库一.注册账号要使用阿里图标,首先你要在它的官网注册一个账号,注册的方式有多种(手机号,Github,微博,阿里域账号),根据你自己的情况进行选 ...
vue中引入第三方字体图标库iconfont，及iconfont引入彩色图标
iconfont字体图标使用就不多说了,大致是几部: 1.在iconfont官网选图标,加入购物车,加入项目,下载到本地,解压 2.在项目assets目录新建目录iconfont,用于存放刚才下载解压 ...
如何在uniapp中引入阿里字体图标
在阿里字体图标里面点击下载到本地然后将解压出来的文件放到static目录下,我的是static/font 然后在App.vue中引入 @import url("./static/font/ ...
把svg图标制作成字体图标_让我们用SVG符号和CSS变量制作彩色图标
把svg图标制作成字体图标 by Sarah Dayan 通过莎拉·达扬让我们用SVG符号和CSS变量制作彩色图标 (Let's make multi-colored icons with SVG ...
在vscode中使用iconfont阿里字体图标
1.登录阿里巴巴矢量图标库 iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载.在线存储.格式转换等功能.阿里巴巴体验团队倾力打造,设计 ...
微信小程序使用阿里彩色图标
微信小程序使用阿里彩色图标首先全局安装 iconfont-tools 1.先windows+R打开cmd命令窗口 2.输入npm i -g iconfont-tools 3.下载自己要使用的彩色图标 ...
web页面设计中使用阿里字体（包含图标）
由于浏览器的兼容问题,很多文本样式在不同浏览器中可能显示不出期待的效果:阿里字体解决了绝大部分浏览器的兼容问题,在各大浏览器都兼容一.登录阿里字体官网 iconfont-阿里巴巴矢量图标库在搜索栏 ...
微信小程序引入阿里巴巴彩色图标字体（Symbol）
步骤一:在微信小程序开发者工具的工作的根目录打开cmd,输入 npm install mini-program-iconfont-cli --save-dev 步骤二:输入命令,生成iconfont. ...

使用阿里字体彩色图标

阿里字体图标symbol引用

使用阿里字体彩色图标相关推荐

最新文章

热门文章