阿里巴巴字体图标使用方法

第一种方式：font-class引用

【Font class】-【下载至本地】-解压后将资源导入【/src/assets/icon】

在main.js中导入

import '@/assets/icon/iconfont.css'

用span标签使用

<span class="iconfont icon-dingdan"></span>

第二种方式：Symbol 引用

【Symbol】-【下载至本地】-解压后将资源导入【/src/assets/icon】

在main.js中引用

// symbol 引用
import '@/assets/iconfont/iconfont.js'
import '@/assets/iconfont/iconfont.css'
//设置全局icon样式
import '@/assets/iconGloble.css'

也可以对icon对图标进行基础设置，比如图标的宽高等。创建【/src/assets/iconGloble.css】文件

.icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;
}

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

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

注意：

class="icon"这个【icon】类名是设置图标的基础样式css样式类名。
xlink:href="#icon-zhiwu" 就是css中的样式类名，但是#必需要加

第三种方式：Unicode引用

第一步：拷贝项目下面生成的 @font-face

@font-face {font-family: 'iconfont';src: url('iconfont.woff2?t=1642856348003') format('woff2'),url('iconfont.woff?t=1642856348003') format('woff'),url('iconfont.ttf?t=1642856348003') format('truetype');
}

第二步：定义使用 iconfont 的样式

.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}

第三步：挑选相应图标并获取字体编码，应用于页面

<span class="iconfont">3</span>

参考：vue导入图标的3种方式【阿里图标】_ミーム的博客-CSDN博客_vue 图标

若有错误请指出，共同进步
希望我的文章对您有所帮助，感谢您的观看！

阿里巴巴字体图标使用方法相关推荐

mu-bottom-navigation导航组件使用阿里巴巴字体图标的方法,vue使用Muse-UI引入阿里巴巴字体图标的方法
Muse-UI引入阿里巴巴字体图标的方法,以及mu-bottom-navigation导航组件使用阿里巴巴字体图标的方法好紧张第一次写博客,第一次总是痛并快乐着.?有写的不对的,不欢迎广大网友指正? ...
项目oms之----阿里巴巴字体图标运用详解 (含：彩色图标svg运用)
思路: 1.找到你需要的阿里巴巴字体图标,添加到公司字体图标阿里巴巴库,----> 刷新该icon所在的阿里巴巴css文件在线链接 2.在项目中新建一个字体图标css文件 inconfo ...
css技术点二：字体图标（阿里巴巴字体图标使用）
css技术点二:字体图标(阿里巴巴字体图标使用) 一.什么是字体图标二.字体图标的好处三.字体图标用法四.字体图标格式介绍一.什么是字体图标字体图标可以为前端工程师提供一种方便高效的图标使用 ...
整理在小程序页面样式中引入阿里巴巴字体图标
整理在小程序页面样式中引入阿里巴巴字体库 1.登录阿里巴巴字体图标 2.在小程序项目中配置 1.登录阿里巴巴字体图标点我阿里巴巴字体图标库搜索需要的字体图标将需要的字体图标点击添加到购车中添加 ...
如何使用阿里巴巴字体图标库
1. 阿里巴巴字体图标库官网:http://www.iconfont.cn/ 2.选择自己要用的字体图标,下载到本地. 3.在页面中引用 iconfont.css 这个样式 4.<i class ...
微信小程序如何使用阿里巴巴字体图标iconfont？
1.从阿里巴巴字体图标库网站下载iconfont字体文件: 2.打开Transfonter字体转换网站,需要将刚刚下载的iconfont文件里面的woff文件转换成base64位编码的文件: 步骤:上 ...
超级好用的阿里巴巴字体图标库，附教程
1.新建:fonts文件夹 2.打开阿里巴巴字体图标官方网站:https://www.iconfont.cn/collections/index?type=3 3.把自己想要的图标,加入购物车,让后下 ...
uni-app小程序阿里巴巴字体图标兼容ios
问题描述提示:uni-app 小程序阿里巴巴字体图标库不兼容 <icon class="iconfont icon-xuanze"></icon> 解决 ...
input 文本框里的放字体图标的方法
input 文本框里的放字体图标的方法 input文本框没有:after和:before这连个伪类,所以就用label标签将他包起来,给label:after或者:before,还有就是我们要给inp ...

阿里巴巴字体图标使用方法

第一种方式：font-class引用

第二种方式：Symbol 引用

第三种方式：Unicode引用

阿里巴巴字体图标使用方法相关推荐

最新文章

热门文章