vue 中使用 iconfont
一、从 iconfont 官网下载图标库至本地
1、进入我的项目,将要使用的项目打包下载
2、下载到本地的文件是压缩形式,解压缩得到以下内容:
二、将本地库添加到 vue 项目
1、在 vue 项目 src/assets/ 创建 iconfont 文件夹
2、在 iconfont 本地库目录中复制以下四个文件至新创建的 iconfont 文件夹
iconfont.css文件
iconfont.eot、iconfont.svg、iconfont.ttf、iconfont.woff
3、在 main.js 中引用 iconfont.css
import './assets/iconfont/iconfont.css'
三、项目中 使用 iconfont
1、Unicode 形式的图标
<span class="iconfont"></span>
相关推荐
-
vue项目打包成桌面应用
vue项目打包成桌面应用
-
面试题-python 如何读取一个大于 10G 的txt文件?
前言 用python 读取一个大于10G 的文件,自己电脑只有8G内存,一运行就报内存溢出:MemoryError python 如何用open函数读取大文件呢? 读取大文件 首先可以自己先制作一个大 ...
-
Vue 打包的静态文件不能直接运行的原因及解决办法
更新时间:2020年11月19日 11:24:44 作者:rxliuli 问题 吾辈使用 vue-cli 直接生成的 vue 模板项目,在模板之上继续开发的.然而在使用 npm run ...
-
vue-cli4配置文件路径别名
vue-cli4配置文件路径别名
-
reactnative 自定义项目的图标库
前言: github比较火的有如react - native -vector- icons等图标库,为什么提到这些第三方库. 首先明确一个点,你是否需要现成的第三方图标库? 优点:开箱即用,内容丰富 ...
-
vue系列教程之微商城项目|项目初始化
vue系列教程之微商城项目|项目初始化
-
CSS基础-03
字体 文本颜色:color:red; 字体分类: 衬线字体serif --字体宽度各异,有衬线 --Times.Georgia.宋体 无衬线字体sans-serif --字体宽度各异,无衬线 --He ...
-
小程序使用阿里巴巴图标库的方法
选择购物车的里的字体图标库 点击阿里巴巴图标库的购物车,来到此页面,点击添加项目 项目添加过后如图,点击font class累引入,点击查看在线链接,复制链接url访问在线链接 访问链接过后,页面展示 ...
-
基于Vue的图片懒加载插件vue-lazyload应用
引言: 作为一名web前端工程师,不仅需要有过硬的开发能力,更需要有强大的用户体验意识. 可视化页面是与用户交互的直接媒介!前端工程师的价值,本人认为主要体现在交互! 概念: 1.什么是图片懒加载? ...
-
高清图标来袭!在vue项目中使用iconfont
为什么不切图标了 以前的图标我们非常喜欢用ps等工具切成一张张xxx.png图片,如果稍微懂点移动端适配,对dpr(设备像素比)有所了解的,还会切出类似home@1x.ppng,home@2x.png ...
-
setTimeout在vue中的正确使用
笔者最近因为公司需求开发使用vue和jquery开发抓娃娃H5极简小游戏,使用到setTimeout函数.遇到了1个坑: 在vue的某个方法(点击后执行) setTimeout(this.end(), ...
-
vue中使用viewer.js 插件
一.预览图 二.地址及参数 viewer.js GitHub地址:https://github.com/fengyuanchen/viewerjs 演示地址:https://fengyuanchen. ...
-
(25条消息) vue中 关于$emit的用法
(25条消息) vue中 关于$emit的用法
-
(25条消息) 在Vue中使用async函数
在Vue中使用async函数 async/await语法 在生命周期钩子上使用async函数 在methods中使用async函数 源代码 async/await语法 在ES7标准中新增了async和 ...
-
vue中怎么动态生成form表单
form-create 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成组件.支持3个UI框架,并且支持生成任何 Vue 组件.内置20种常用表单组件和自定义组件,再复杂 ...
-
深入理解vue中的slot与slot
作者/云荒杯倾 写在前面 vue中关于插槽的文档说明很短,语言又写的很凝练,再加上其和methods,data,computed等常用选项使用频率.使用先后上的差别,这就有可能造成初次接触插槽的开发者 ...
-
(48条消息) VUE中实现打印vue
安装: npm install vue-print-nb --save main.js: import Print from 'vue-print-nb' Vue.use(Print); 使用方法: ...
-
vue中 Vuex
一.什么是Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 状态,其实指的是实例之 ...