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. BigDecimal遇到的问题，大伙也说说

    一:相除精度丢失的问题 BigDecimal的api除法相对加减乘要实现的复杂多了,只介绍常用的我遇到的问题: 问题:两数相除,如果9/3=3整除没问题,但是10/3=0.33333333...... ...

  2. 分享一下我研究SQLSERVER以来收集的笔记

    分享一下我研究SQLSERVER以来收集的笔记 前言 为什麽分享??因为像现在网上很多人攻城师那样,转行去卖水果,卖早餐,总有一日我也会离开这个行业的 由于本人不是在大公司上班工资很低,我希望有一天存 ...

  3. 洗礼灵魂，修炼python（19）--文件I/O操作，linecache，fileinput模块

    文件I/O操作 1.什么是文件I/O操作 首先I/O(input/output),即输入/输出端口,然后文件,大家应该都是是什么,一个数据,一个txt或者html文档就是一个文件.文件操作就是对文件进 ...

  4. WebSocket简单尝试

    System.Net.WebSockets.WebSocket 需要.NET 4.5,IIS8以上,Windows Server2008R2自带的IIS不支持,Windows8及Server2012以 ...

  5. webApi core2 DI通过代码来获取容器里面已注入的对象

    请求服务 来自 HttpContext 的一次 ASP.NET 请求中可用的服务通过 RequestServices 集合公开的. 请求服务将你配置的服务和请求描述为应用程序的一部分.当你的对象指定依 ...

  6. 如何创建一个 mongo 数据库并为它添加一个认证用户？

    0.登录 admin 库,开启一个 mongo shell mongo --port 27017 -u "adminUser" -p "adminPass" - ...

  7. iOS-单选cell的实现

    一.思路 先设置一个chooseCelltag标记(类型为NSIndexPath),然后在点击cell触发的时候,如果tag设置有值,就设置 UITableViewCell *selectedCell ...

  8. CSS命名方式=》BEM

    时间:2016-11-04 20:04:53 原文地址:https://github.com/zhongxia245/blog/issues/48 一.背景 挺早就听说过BEM了,也大概的知道怎么用, ...

  9. 【Ansible 文档】提示、推荐、注意事项

    1. 查看 详细 信息 如果你想要查看成功模块和不成功的详细输出,使用 --verbose 标识 2. 检查 playbook 的语法 使用 ansible-playbook 的 --syntax-c ...

  10. webpack-dev-server 配置

    webpack.config.js 配置 var ExtractTextPlugin = require("extract-text-webpack-plugin"); var C ...