在vue项目中使用第三方的字体图标库
如何在vue项目中使用第三方的字体图标库
以在vue项目中导入阿里字体图标库为例
1、打开阿里字体图标库的官方网址
https://www.iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486a
2、选择自己需要的字体图标,下面做演示
3、选择自己需要的字体图标
4、加入购物车
5、查看自己加入购物车的图标
6、添加到项目
7、创建到项目
8、添加到自己的项目中
9、下载到本地
10、保存到本地
11、解压压缩包
12、将解压过的文件夹复制到自己所需要的文件夹中,这里复制到我的项目中,不同的项目自行选择
13、先在项目的入口文件 main.js 中导入字体图标库
14、查看所需要的类名
15、把icon图标引入到项目中
16、在需要引用字体图标的组件中引用字体图标
17、效果
在vue项目中使用第三方的字体图标库相关推荐
- Vue项目中,引入阿里矢量图标库
Vue项目中,引入阿里矢量图标库 (1)阿里矢量图标库地址(需要登录): https://www.iconfont.cn (2)找到自己心仪的图标: (3)添加入库: (4)点击购物车图标(免费的哦) ...
- Vue - 项目中使用iconfont(阿里图标库)
项目中如何使用iconfont(阿里图标库) 一. 登陆iconfont官网: https://www.iconfont.cn/ 二. 创建一个图标项目 1.点击"图标管理"子目录 ...
- vue项目中使用阿里巴巴iconfont字体图标
1.把下载下的东西解压全放在vue的某个文件夹 2.在main.js引入 import './assets/iconfont/iconfont.css' 3.在需要用图标的标签比如span标签引入你想 ...
- vue 不生效 打包 样式_解决在vue项目中webpack打包后字体不生效的问题
最近在项目开发过程中遇到如下问题:开发环境中设置的字体样式使用webpack打包后到生产环境不生效.如图: 打开控制台查看元素样式,发现在开发环境的时候"微软雅黑"被解析成unic ...
- 在项目中使用阿里巴巴矢量字体图标
在项目中使用阿里巴巴矢量字体图标 打开阿⾥巴巴字体iconfont 搜索需要的图标,选择要使用的图标,点击添加入库 点击右上角的购物车按钮,进入库中 选择添加入项目, 选择新建项目,或者使用已有项目 ...
- vue项目中配置标题栏title的图标和文字
一.普通 HTML 页面,配置图标和文字 <head><title>标题栏文字</title><link rel="icon" href= ...
- 在已有vue项目中半途引入cube ui组件库的使用遇到的坑(血泪)
直接进入正题(我这儿是属于cube-ui普通编译) 1,在你的vue项目中找到package.json文件安装cube-ui 终端输入命令 npm install cube-ui --save 2 ...
- 阿里巴巴矢量图标库项目中使用svg格式字体图标使用方式及封装
一.首先登陆阿里云矢量图标库,把需要的字体图标加入到自己的项目中 二.阿里云图标的四种方式(推荐第三种方式引入,如果不考虑网络问题可以用在线引入的方式) 进入项目以后会看到阿里云可以选择三种方式进行导 ...
- Vue、Element-ui项目中如何使用Iconfont(阿里图标库)
我们使用element-ui.vue开发网站的时候,往往图标是起着很重要的作用. 2018-11-9更新 VX号: LJT-917 这是我的微信公众号全是技术文章: 1.傻瓜式引用:由于这种方法及其 ...
最新文章
- 六面!终斩腾讯NLP暑期实习offer
- 激光投影市场将保持产品多元化发展趋势
- AutoCAD VBA对齐对象
- GPS/轨迹追踪、轨迹回放、围栏控制
- 【2016年第2期】专题导读:大数据与社会治理
- 低版本wordpress运行在PHP5.4上如何关闭warning信息
- Qt QMutexLocker_自动解锁的机制
- 修改Linux系统分区后挂载问题
- 数字信号处理实验感想matlab,数字信号处理MATLAB实验报告 4.doc
- 【前端项目】<开发实战>一个小而精致的个人简历
- java开发环境实验总结_20155229 实验一《Java开发环境的熟悉》实验报告
- 网鼎杯2020 玄武组部分writeup
- combo接口(combo接口)
- 软件著作权的鉴定材料提交
- 企业微信【加入群聊】群活码十问十答
- 解决java网络编程IPv6问题
- 不同系统电脑远程桌面连接
- [转]Linux 2.6.19.x 内核编译配置选项简介
- java获取所有进程_Java 获取系统的进程列表
- 片偏移怎么计算_计算机网络学习笔记(四)之网络层
热门文章
- C#——关闭窗口的方法——vs
- window docker国内镜像设置
- javascript 生成简单等差数列
- Sqlite删除列方法
- 王者荣耀登录显示换服务器是不是封号,王者荣耀:更改登录画面等于开挂?小心封号!...
- “中信幸福财富”品牌体系全面升级 中信银行打造客户首选的财富管理主办行
- html中绝对路径如何写,什么是绝对路径?绝对路径的具体写法和用法
- 浅谈PHP单例模式 三私一公
- idea 上传jar包到远程仓库_在idea打包并上传到云服务项目流程分析
- 请用一段简单的代码讲述一个悲伤的故事