vue+element 使用iconfont (阿里图标库)

步骤一(找到自己要引入的图标,如果已经找到只是不会引入,请直接查看步骤二):

准备:首先进入阿里图标库,登录自己的账号,在下图位置输入想搜索的图标,例如:'退出'

随便选一个自己想要的如图

把鼠标移动到该图标,点击悬框的购物车,如下图,(如果还需要其他图标可以重复以上两个步骤,选择多个加入)

点击购物车

点击添加至项目,点击新建项目,随便起名字,然后点击确定

左边的箭头就是你刚刚起名字的项目,1.2.3分别是三种icon的引入方式(如下图),今天我们用2的方式,也就是Font class的方式引入项目,

步骤二:引入

点击项目设置(上图右边箭头的位置),修改前缀,一定要修改,默认的前缀是icon,与el-icon有冲突,会导致自己的图标无法显示,最下面的随便改,自己喜欢就好

然后点击下载到本地,下载好之后解压

解压好之后去掉,没用的文件

然后剩下的文件,复制粘贴到自己项目的assets/icon(别问我自己为啥我没有icon,因为我是自己建的),然后打开main.js,引入一下iconfont.css,就像这样

//阿里图标的css
import './assets/icon/iconfont.css'

然后你就可以使用了,像这样

<span class="iconfontone tt-icontuichu-copy"></span>

你肯定会有疑问我怎么确定我想用的图标的类名呢,你可以返回你的项目,查看你粘贴复制到项目中assets/icon下是不是有iconfont.css,你点进去,看看下图再看看上面我的类名是不是豁然开朗

vue+element 使用iconfont (阿里图标库)相关推荐

vue中通过在线链接使用iconfont阿里图标库FontClass
看项目原来的都是将图标下载到本地,然后引入css文件.查了些文章也都是介绍的,先将图标下载到本地再导入. 那么在项目开发中,时不时就会需要加入新的图标.这时候每次都要重新将图标下载到本地再导入.觉得十 ...
Vue、Element-ui项目中如何使用Iconfont(阿里图标库)
我们使用element-ui.vue开发网站的时候,往往图标是起着很重要的作用. 2018-11-9更新 VX号: LJT-917 这是我的微信公众号全是技术文章: 1.傻瓜式引用:由于这种方法及其 ...
Vue本地引用Iconfont(阿里巴巴图标库) SVG及普通图标
1.本地src目录下,新建xxx文件夹,自定义文件夹名称.目录结构如下:fontSy对应svg,fontUn对应普通图标. 2.在iconfont上下载对应zip(正常icon和SVG),zip中包含 ...
优秀工具介绍之——Iconfont 阿里图标库
阿里妈妈MUX倾力打造的矢量图标管理.交流平台. 设计师将图标上传到Iconfont平台,用户可以自定义下载多种格式的icon,平台也可将图标转换为字体,便于前端工程师自由调整与调用. 官网地址: h ...
antd 阿里图标库扩展a-icon 图标
vue 项目中使用阿里图标库扩展antd 组件 icon 的图标第一步:创建图标库在https://www.iconfont.cn/ 创建自己的图标库,首相创建项目,然后把Svg 图标上传到该项 ...
Vue 使用阿里图标库代替element icon
一.创建阿里图标库项目打开网址:https://www.iconfont.cn/ ,找到[我的项目] 点击右侧文件夹[创建项目] 填写[项目名称],[FontClass]前缀填好后,后续使用icon ...
使用在线链接阿里图标库（iconfont）(vue)
1.阿里图标库网址 https://www.iconfont.cn/ 2.搜索–>图标名称–>鼠标移入图标->加入购物车–>点击购物车–>添加至项目 2.点击Font c ...
vue中阿里图标库iconfont的设置
步骤基本使用 1 下载存放从阿里图标库中下载压缩包,解压开目录如下在vue项目的assets下创建font文件夹,把这些文件复制到font文件夹下,为了有条理再创建styles文件夹,目录如下 ...
Vue - 项目中使用iconfont（阿里图标库）
项目中如何使用iconfont(阿里图标库) 一. 登陆iconfont官网: https://www.iconfont.cn/ 二. 创建一个图标项目 1.点击"图标管理"子目录 ...

vue+element 使用iconfont (阿里图标库)

vue+element 使用iconfont (阿里图标库)相关推荐

最新文章

热门文章