vue项目中如何使用字体图标，简单清晰明了！

1.登录阿里巴巴图标库官网，创建一个自己的项目，并将对应的svg图片添加或上传到对应的项目中，如下图所示：

2.点击【下载至本地】按钮，将文件夹下载下来；

3.在项目中src/assets目录下创建一个文件夹iconfont，将第二步中下载下来的文件粘贴到iconfont文件夹去（注意只需要引入对应的样式及图标字体即可，大家也可根据自己项目的使用情况引入对应的文件）：

4.在main.js中引入字体图标样式：

1	import './assets/iconfont/iconfont.css' // 引入字体图标样式

5.字体图标的使用（可以直接通过定义color及font-size改变字体图标的颜色及大小）：

1	<i class="iconfont icon-arrow-left"></i>

其中，iconfont是字体默认的Font Family，icon-是字体默认自带的前缀，arrow-left是我自定义的图标class，若想将iconfont和icon-修改为其他，则可在阿里巴巴项目中进行编辑修改：

vue项目中如何使用字体图标，简单清晰明了！相关推荐

在 Quasar cli 搭建的 vue 项目中引用阿里字体图标 iconfont symbol方式
在 Quasar cli 搭建的 vue 项目中引用阿里字体图标 iconfont 1. symbol 方式 2. font class 方式(未实践) 1. symbol 方式首先说明一下,这 ...
vue项目中使用阿里iconfont图标(下载并在本地引用)
vue项目中使用阿里iconfont图标(下载并在本地引用) step1 step2 step3 在scr/asstets/css目录下新建icons文件夹,把图中所需要的四个文件放进去即可记得在m ...
Vue项目中使用Svg矢量图标
#Vue项目中使用Svg矢量图标使用npm install svg-sprite-loader –save命令或 cnpm install svg-sprite-loader –save命令进行安装 ...
手把手教你如何在项目中使用阿里字体图标IconFont
阿里图标官网地址:IconFont-阿里巴巴矢量图标库一.注册账号要使用阿里图标,首先你要在它的官网注册一个账号,注册的方式有多种(手机号,Github,微博,阿里域账号),根据你自己的情况进行选 ...
vue项目中如何设置ico图标
在vue项目开发中往往会设计到浏览器头部图标的设置,这里分享一下自己在项目中的使用的方法,如有不足的地方还望指正,直奔主题: 1.首先如何制作ico图标,本人使用的是比特虫在线制作ico图标,使用方法 ...
vue项目中使用阿里巴巴矢量图库图标的操作步骤
1)网站 https://www.iconfont.cn/ 找个账号登录,收藏一些自己想要的图标. 2)开始新建项目,项目名称任意 ,记住fontClass/ symbot 前缀. 3)把收藏的图标放 ...
【自用】Vue项目中使用自定义字体样式
步骤一:拿到自定义字体包首先要得到自定义字体包(后缀名为.ttf, .otf, .eot等格式的字体包),可自行下载也可以问UI要字体包. 步骤二:在项目文件夹中进行放置自定义字体包的配置在项 ...
2021-11-26 vue项目中如何引入iconfont图标库
1.下载在iconfont官网上下载选好的项目中的图标,解压获得一个文件夹,复制其中的文件到vue项目的assets/iconfont文件夹下 2.引入在main.js中引入import '@/a ...
angular7项目中使用Iconfont字体图标库
iconfont官网 https://www.iconfont.cn 选择字体图标首先进入iconfont官网,然后使用github账号登录,搜索自己需要的图标,添加至购物车,然后添加之我的项目,点 ...

vue项目中如何使用字体图标，简单清晰明了！

vue项目中如何使用字体图标，简单清晰明了！相关推荐

最新文章

热门文章