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. JAVA学习笔记:注释、变量的声明和定义、

    本文内容: 注释 变量的声明和定义 成员变量和局部变量 首发时间:2018-03-16 15:59 注释: 单行注释:// 多行注释:/* - */ 变量: 变量是内存中的一个存储区域,变量的定义就是 ...

  2. 洗礼灵魂,修炼python(34)--面向对象编程(4)—继承

    前面已经说到面向对象编程有封装,继承,多态三大特性,那么其中的继承则很重要,可以直接单独的拿出来解析 继承 1.什么是继承: 字面意是子女继承父母的家产或者特性等.而在编程里继承是指子类继承父类(基类 ...

  3. 阿里云搭建JAVA WEB环境(SQL Server + TomCat + 配置域名)

    假期刚刚搭完,先写个提纲,今晚写完: 1.申请一个月的免费的云服务器ECS; 2.在云服务器上安装Java开发环境+Sql Server+Tomcat; 3.购买域名并认证,绑定服务器共有IP地址; ...

  4. Linux下的sysfs与udev的关系是什么?

    sysfs  sysfs 把连接在系统上的设备和总线组织成为一个分级的文件,它们可以被从用户的空间存取到.简单介绍sysfs文件系统,您可能想知道 sysfs 是怎么认出系统中存在的设备以及应该使用什 ...

  5. oracle用户权限和角色

    用户权限是最基本的数据库安全控制.其作用就是控制用户对数据的访问,sql语句的执行.当oracle用户创建的时候,可以通过授权来控制用户对数据的连接,数据库对象的操作等等. 在oracle中,分为两种 ...

  6. SQL注入的绕过

    一.常用符号的绕过 1.空格 1 空格代替:+ %20 %09 %0a %0b %0c %0d %a0 %00 /**/ /*!*/ 2 括号绕过:常用于基于时间延迟的盲注,例如构造语句: ?id=1 ...

  7. IO流_文件切割与合并(带配置信息)

    在切割文件的时候应该生成一个记录文件信息的文件,以便在以后合并文件的时候知道这个文件原来的文件名和记录文件切割完后生成了多少个切割文件 import java.io.File; import java ...

  8. 无根树的计数——prufer序列

    参考博客https://www.cnblogs.com/dirge/p/5503289.html (1)prufer数列是一种无根树的编码表示,类似于hash. 一棵n个节点带编号的无根树,对应唯一串 ...

  9. android 布局文件中xmlns:android="http://schemas.android.com/apk/res/android"

    http://blog.163.com/benben_long/blog/static/199458243201411394624170/ xmlns:android="http://sch ...

  10. Hadoop 基本概念

    一.Hadoop 简介 Hadoop 是一个由 Apache 基金会所开发的分布式系统基础架构,它可以使用户在不了解分布式底层细节的情況下开发分布式程序,充分利用集群的威力进行高速运算和存储. 从其定 ...