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. http2

    原文转至:https://zhuanlan.zhihu.com/p/26559480 HTTP/2 是 HTTP 协议自 1999 年 HTTP 1.1 发布后的首个更新,主要基于 SPDY 协议.由 ...

  2. Java 数据驱动测试

    适用场景 测试搜索功能, 基于数据类型需要测多种不同的数据, 比如最大值, 小数, 负数, 字符串, 特异符号等等. 如果直接写代码, 每一种数据类型都需要写一遍代码, 冗长且不方便调试. 如果采用数 ...

  3. Python实现批量梯度下降算法

    # -*- coding: UTF-8 -*- import numpy as npimport math # 定义基础变量learning_rate = 0.1n_iterations = 1000 ...

  4. python-Tkinter整理总结

    笔者学习Tkinter模块也有好久时间了,现将学习的做以整理. tkinter简介(一) tkinter中lable标签控件(二) tkinter中button按钮控件(三) tkinter中entr ...

  5. 05-sudo权限配置

    阅读目录 基础环境准备 服务端配置 客户端配置 客户端验证 附:sudo常见属性介绍 常见错误分析 1. 基础环境准备 本文接文章openldap服务端安装配置 2. 服务端配置 导入sudo sch ...

  6. 服务器较稳妥的磁盘阵列方案：RAID5+热备盘

    最近公司这边要整个数据中心,但是我们这边磁盘阵列的方案选择方面需要做好万全的测试 内部测试的服务器当初损坏的磁盘1个做的raid5直接换个新磁盘做替换rebuild就行了 但是现在想的方法是5+1的方 ...

  7. Win10更换电脑，又不想重装系统的解决方法

    问题描述: 在公司因为两年前用的i3的电脑很卡,然后想换i5的电脑,但是又不想重装系统,因为安装的东西太多了,重装很麻烦 Windows to go介绍: Windows To Go是Windows ...

  8. switch选择结构

    switch( 表达式 )//表达式可以使用byte,short,int,char { case 值1: 逻辑语句: break;//跳出switch语句 case 值2: 逻辑语句; break; ...

  9. pandas中DataFrame对象to_csv()方法中的encoding参数

    当使用pd.read_csv()方法读取csv格式文件的时候,常常会因为csv文件中带有中文字符而产生字符编码错误,造成读取文件错误,在这个时候,我们可以尝试将pd.read_csv()函数的enco ...

  10. GUI_事件监听机制与ActionListener演示

    事件监听机制组成: 事件源:(awt包或者swing包中的那些图形界面组件)(被打的那个人,被点击的组件,可以承受某些事件,但不是所有事件都能承受) 事件:每个事件源都有自己特有的对应事件和共性事件( ...