阿里font图标使用流程

一、找到对应项目,点击下载至本地,
二、将下载好的压缩包解压,下图是解压后的文件夹,然后打开后将里面的文件全部复制.
三、在项目static目录下新建文件夹iconfont,目录结构名称自己定义都可以,将复制的文件粘贴到这个文件夹下,
四、在main.js全局引用,注意文件路径不要写错
五、在components下新建文件夹SvgIcon,里面新建index.vue文件.代码如下
六. 在main.js 全局注册第五步的组件
七. HTML中使用,item.icon内容对应你图表库里的名称,style根据需要设置你的字体图标大小
八. 页面中显示效果
九.项目增加图标后,更新的方法:先执行第一步下载zip文件,然后同样的执行第二步解压复制全部文件,再粘贴到你的iconfont文件夹下,提示'同名文件是否全部覆盖?' 全部选是. ok图标新增更新完成

一、找到对应项目,点击下载至本地,

二、将下载好的压缩包解压,下图是解压后的文件夹,然后打开后将里面的文件全部复制.

三、在项目static目录下新建文件夹iconfont,目录结构名称自己定义都可以,将复制的文件粘贴到这个文件夹下,

四、在main.js全局引用,注意文件路径不要写错

import Vue from 'vue'
import '../static/resources/iconfont/iconfont.js'
import '../static/resources/iconfont/iconfont.css'

五、在components下新建文件夹SvgIcon,里面新建index.vue文件.代码如下

<template><svg :class="svgClass" aria-hidden="true" v-on="$listeners"><use :xlink:href="iconName" /></svg>
</template><script>
export default {name: 'SvgIcon',props: {iconClass: {type: String,required: true},className: {type: String,default: ''}},computed: {iconName() {return `#icon-${this.iconClass}`},svgClass() {if (this.className) {return 'svg-icon ' + this.className} else {return 'svg-icon'}}}
}
</script><style scoped>
.svg-icon {width: 1.2em;height: 1.2em;fill: currentColor;overflow: hidden;
}
</style>

六. 在main.js 全局注册第五步的组件

import SvgIcon from './components/SvgIcon'
Vue.component('SvgIcon', SvgIcon)

七. HTML中使用,item.icon内容对应你图表库里的名称,style根据需要设置你的字体图标大小

<svg-icon :icon-class="item.icon" style="width:2.4em;height:2.4em" />

八. 页面中显示效果

九.项目增加图标后,更新的方法:先执行第一步下载zip文件,然后同样的执行第二步解压复制全部文件,再粘贴到你的iconfont文件夹下,提示’同名文件是否全部覆盖?’ 全部选是. ok图标新增更新完成

【阿里font图标使用流程】相关推荐

如何在uniapp中引入阿里字体图标
在阿里字体图标里面点击下载到本地然后将解压出来的文件放到static目录下,我的是static/font 然后在App.vue中引入 @import url("./static/font/ ...
微信小程序使用阿里彩色图标
微信小程序使用阿里彩色图标首先全局安装 iconfont-tools 1.先windows+R打开cmd命令窗口 2.输入npm i -g iconfont-tools 3.下载自己要使用的彩色图标 ...
uniapp添加阿里字体图标库图标
字体图标添加 1.需要到阿里矢量图标库添加 2.添加后Unicode下载并替换@/styles/font下文件 3.在线图标方式复制阿里矢量图标库->我的项目->Unicode-> ...
uni-app之阿里字体图标转base64方法
uni-app之阿里字体图标转base64方法 uni-app开发过程中发现小程序端不能直接使用字体图标,需先转成base65方可使用,转换方式如下. 一.转换步骤 1.1 从iconfont下载字体 ...
在 Quasar cli 搭建的 vue 项目中引用阿里字体图标 iconfont symbol方式
在 Quasar cli 搭建的 vue 项目中引用阿里字体图标 iconfont 1. symbol 方式 2. font class 方式(未实践) 1. symbol 方式首先说明一下,这 ...
Hexo博客之优雅使用阿里iconfont图标
前言为什么写这篇文章? Font Awesome 无论是 v4 还是 v5 图标都有一些局限性.因此不少小伙伴想到了使用阿里 iconfont 图标.然而很多小伙伴并不是前端这个专业,可能对使用图标 ...
layui内置图标不满足需求，自定义添加阿里矢量图标
layui添加阿里矢量图标适用于layui内置图标不够用的情况 1.第一步进入阿里矢量图标官网,选择自己的图标,加入购物车,点击下载代码 2.第二部,解压下载的文件,复制所有内容,到项目中这里再 ...
【sciter】：sciter 使用阿里矢量图标库
sciter 使用阿里矢量图标库步骤一:选择要使用的图标,并添加到项目中(阿里矢量官网中的项目) 步骤二(关键):选中项目设置,在字体格式中选择TTF,其他不选,保存步骤三:点击 Font cla ...
layui引用阿里矢量图标
layui-pear-admin添加阿里矢量图标可能需要用到的注册阿里矢量图标账号导入并下载项目使用icon 可能需要用到的阿里矢量图标地址:https://www.iconfont.cn/ ...

【阿里font图标使用流程】

阿里font图标使用流程

一、找到对应项目,点击下载至本地,

二、将下载好的压缩包解压,下图是解压后的文件夹,然后打开后将里面的文件全部复制.

三、在项目static目录下新建文件夹iconfont,目录结构名称自己定义都可以,将复制的文件粘贴到这个文件夹下,

四、在main.js全局引用,注意文件路径不要写错

五、在components下新建文件夹SvgIcon,里面新建index.vue文件.代码如下

六. 在main.js 全局注册第五步的组件

七. HTML中使用,item.icon内容对应你图表库里的名称,style根据需要设置你的字体图标大小

八. 页面中显示效果

九.项目增加图标后,更新的方法:先执行第一步下载zip文件,然后同样的执行第二步解压复制全部文件,再粘贴到你的iconfont文件夹下,提示’同名文件是否全部覆盖?’ 全部选是. ok图标新增更新完成

【阿里font图标使用流程】相关推荐

最新文章

热门文章

【阿里font图标使用流程】

阿里font图标使用流程

一、 找到对应项目,点击下载至本地,

二、将下载好的压缩包解压,下图是解压后的文件夹,然后打开后将里面的文件全部复制.

三、在项目static目录下新建文件夹iconfont,目录结构名称自己定义都可以,将复制的文件粘贴到这个文件夹下,

四、在main.js全局引用,注意文件路径不要写错

五、在components下新建文件夹SvgIcon,里面新建index.vue文件.代码如下

六. 在main.js 全局注册第五步的组件

七. HTML中使用,item.icon内容对应你图表库里的名称,style根据需要设置你的字体图标大小

八. 页面中显示效果

九.项目增加图标后,更新的方法:先执行第一步下载zip文件,然后同样的执行第二步解压复制全部文件,再粘贴到你的iconfont文件夹下,提示’同名文件是否全部覆盖?’ 全部选是. ok图标新增更新完成

【阿里font图标使用流程】相关推荐

最新文章

热门文章

一、找到对应项目,点击下载至本地,