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>

(0)

相关推荐

  • vue-cli4配置文件路径别名

    vue-cli4配置文件路径别名

  • reactnative 自定义项目的图标库

    前言: github比较火的有如react - native -vector- icons等图标库,为什么提到这些第三方库. 首先明确一个点,你是否需要现成的第三方图标库? 优点:开箱即用,内容丰富 ...

  • Vue 打包的静态文件不能直接运行的原因及解决办法

      更新时间:2020年11月19日 11:24:44   作者:rxliuli    问题 吾辈使用 vue-cli 直接生成的 vue 模板项目,在模板之上继续开发的.然而在使用 npm run ...

  • 基于Vue的图片懒加载插件vue-lazyload应用

    引言: 作为一名web前端工程师,不仅需要有过硬的开发能力,更需要有强大的用户体验意识. 可视化页面是与用户交互的直接媒介!前端工程师的价值,本人认为主要体现在交互! 概念: 1.什么是图片懒加载? ...

  • vue系列教程之微商城项目|项目初始化

    vue系列教程之微商城项目|项目初始化

  • CSS基础-03

    字体 文本颜色:color:red; 字体分类: 衬线字体serif --字体宽度各异,有衬线 --Times.Georgia.宋体 无衬线字体sans-serif --字体宽度各异,无衬线 --He ...

  • vue项目打包成桌面应用

    vue项目打包成桌面应用

  • 小程序使用阿里巴巴图标库的方法

    选择购物车的里的字体图标库 点击阿里巴巴图标库的购物车,来到此页面,点击添加项目 项目添加过后如图,点击font class累引入,点击查看在线链接,复制链接url访问在线链接 访问链接过后,页面展示 ...

  • 面试题-python 如何读取一个大于 10G 的txt文件?

    前言 用python 读取一个大于10G 的文件,自己电脑只有8G内存,一运行就报内存溢出:MemoryError python 如何用open函数读取大文件呢? 读取大文件 首先可以自己先制作一个大 ...

  • 高清图标来袭!在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 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 状态,其实指的是实例之 ...