1.打开http://www.iconfont.cn官网，搜索你想要的图标。添加字体图标到购物车，点击购物车然后添加至项目，点击确定

2.点击图标管理/我的项目，找到对应的文件，点击Unicode，然后生成在线链接

3.新建iconfont.css文件，把在线生成的代码粘贴复制进去即可

4.定义使用iconfont样式，把下面代码复制到iconfont.css里面

.iconfont{

    font-family:"iconfont" !important;

    font-size:16px;font-style:normal;

    -webkit-font-smoothing: antialiased;/*字体清除锯齿效果*/

    -webkit-text-stroke-width: 0.2px;/*文本外边框大小*/

    -moz-osx-font-smoothing: grayscale;}

5.在Footer.vue 中引入css文件 `@import '../assets/css/iconfont.css'`
6.在HTML中需要使用到图标
<i class="iconfont"></i>     <!--里面写上你想用的图标下面的Unicode-->

 

vue 中使用iconfont Unicode编码线上字体图标的流程的更多相关文章

  1. 微信小程序中使用iconfont/font-awesome等自定义字体图标

    小程序不能识别外部字体文件,但是转换成Base64就可以使用字体图标了. 以阿里巴巴的iconfont为例 1.下载图标 先去官网下载喜欢的图标==> 下载解压后的文件夹==> 2.在线转 ...

  2. vue中解决时间在ios上显示NAN的问题

    最近在用vue,遇到倒计时在ios上显示为NAN的问题. 因为做的是倒计时支付,思路是获取服务器时间和下单时间,再转成秒级时间戳做差值. 在网上找到说是ios 不支持例如2018-09-01 10:0 ...

  3. vue中使用触摸事件，上滑，下滑，等

    第一步,下载一个包 npm install kim-vue-touch -s 在当前项目中下载包 第二部 import vueTouch from 'kim-vue-touch' Vue.use(vu ...

  4. vue中如何在自定义组件上使用v-model和.sync

    自定义事件 tips 推荐始终使用 kebab-case 的事件名.(v-on会将事件名自动转换为小写,避免匹配不到) changeData × change-data √ 自定义组件的v-model ...

  5. 如何在Vue中，当鼠标hover上元素时,给元素加遮罩层

    介绍 当鼠标hover 上元素时,给元素加一层遮罩层. 效果图 使用 import VueHoverMask from 'vue-hover-mask' export default { compon ...

  6. Vue 中使用 viewerjs进行本地上传预览图片

    https://www.cnblogs.com/shenjp/p/9754171.html 如果图片路径是 接口的返回信息的话,将路径存储在数组中,在this.$nextTick中实例化Viewer: ...

  7. vue中使用iconfont和在旧有的iconfont中添加新的图标

    todo 使用参考:https://blog.csdn.net/qq_34802010/article/details/81451278 大体步骤是正确的,具体可参考官方文档和下载下来的代码中的dem ...

  8. Vue中使用iconfont

    学习博客:https://www.imooc.com/article/33597?block_id=tuijian_wz

  9. vue中使用echarts，地图上的涟漪特效大小设置

    在使用echarts进行开发大屏时,使用到了地图这个组件 我们会根据返回的值来决定涟漪的大小 这时则使用 其它的value为返回的数组,一般格式为[经度,维度,值] 这样就能动态设置效果的大小了

随机推荐

  1. JavaScript按纯数字排序

      直接上代码: var arr=[ {name:"张散步",age:"23",sports:"篮球",number:"23112 ...

  2. [20180625]oradebug peek 2.txt

    [20180625]oradebug peek 2.txt --//上个星期演示了oradebug peek查看内存数据块的情况,oradebug peek {address} length 1,最后 ...

  3. Java同步、异步区别

    一.概念: 1.同步:所有的操作都做完,才返回给用户.这样用户在线等待的时间太长,给用户一种卡死了的感觉(就是系统迁移中,点击了迁移,界面就不动了,但是程序还在执行,卡死了的感觉).这种情况下,用户不 ...

  4. EntityFramework Code-First 简易教程（九）-------一对多

    一对多(One-to-Many)关系: 下面,我们来介绍Code-First的一对多关系,比如,在一个Standard(年级)类中包含多个Student类. 如果想了解更多关于one-to-one,o ...

  5. 第四章 Hyper-V 2012 R2 网络配置

      尼玛的我不高兴写了,所以下面的文档我直接把原来的pdf给转换出来,加了点自己的注解,我写的话会写自己觉得终于的章节. 在搭建虚拟化平台时,网络的虚拟化是一个非常重要的环节,如何保障网络的持续可用并 ...

  6. dell r420 H310/H810阵列配置教程及常见问题

    进入H310/H810阵列卡BIOS界面 阵列卡管理快捷键 如何创建RAID0和RAID1和RAID5 阵列修复篇 Foreign(外来)状态的硬盘应如何处理 1.进入H310/H810阵列卡BIOS ...

  7. bash的内置字符串处理工具

    bash内置字符串处理工具: 1.字符串切片: ${var:offset:number} 取字符串的子串: ${var:  -length} 取字符串的最右侧的length个字符.注意:冒号右侧必须有 ...

  8. banner图片全屏显示

    <script> $(function () { function reinitSize() { var window_h = $(window).height(); var window ...

  9. Spring boot + mybatis + orcale

    接着上次的实现, 添加 mybatis 查询 orcale 数据库 第一步: 新建几个必须的包, 结果如下 第二步: 在service包下新建personService.java 根据名字查perso ...

  10. eclipse打断点调试进入到class文件中,不显示变量值的解决办法汇总

    每天学习一点点 编程PDF电子书免费下载: http://www.shitanlife.com/code 问题描述:eclipse打断点调试进入到class文件中,而且监视区不显示变量结果 是由于对应 ...