vue 中使用iconfont Unicode编码线上字体图标的流程
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编码线上字体图标的流程的更多相关文章
- 微信小程序中使用iconfont/font-awesome等自定义字体图标
小程序不能识别外部字体文件,但是转换成Base64就可以使用字体图标了. 以阿里巴巴的iconfont为例 1.下载图标 先去官网下载喜欢的图标==> 下载解压后的文件夹==> 2.在线转 ...
- vue中解决时间在ios上显示NAN的问题
最近在用vue,遇到倒计时在ios上显示为NAN的问题. 因为做的是倒计时支付,思路是获取服务器时间和下单时间,再转成秒级时间戳做差值. 在网上找到说是ios 不支持例如2018-09-01 10:0 ...
- vue中使用触摸事件,上滑,下滑,等
第一步,下载一个包 npm install kim-vue-touch -s 在当前项目中下载包 第二部 import vueTouch from 'kim-vue-touch' Vue.use(vu ...
- vue中如何在自定义组件上使用v-model和.sync
自定义事件 tips 推荐始终使用 kebab-case 的事件名.(v-on会将事件名自动转换为小写,避免匹配不到) changeData × change-data √ 自定义组件的v-model ...
- 如何在Vue中,当鼠标hover上元素时,给元素加遮罩层
介绍 当鼠标hover 上元素时,给元素加一层遮罩层. 效果图 使用 import VueHoverMask from 'vue-hover-mask' export default { compon ...
- Vue 中使用 viewerjs进行本地上传预览图片
https://www.cnblogs.com/shenjp/p/9754171.html 如果图片路径是 接口的返回信息的话,将路径存储在数组中,在this.$nextTick中实例化Viewer: ...
- vue中使用iconfont和在旧有的iconfont中添加新的图标
todo 使用参考:https://blog.csdn.net/qq_34802010/article/details/81451278 大体步骤是正确的,具体可参考官方文档和下载下来的代码中的dem ...
- Vue中使用iconfont
学习博客:https://www.imooc.com/article/33597?block_id=tuijian_wz
- vue中使用echarts,地图上的涟漪特效大小设置
在使用echarts进行开发大屏时,使用到了地图这个组件 我们会根据返回的值来决定涟漪的大小 这时则使用 其它的value为返回的数组,一般格式为[经度,维度,值] 这样就能动态设置效果的大小了
随机推荐
- Linux Linux内核参数调优
Linux内核参数调优 by:授客 QQ:1033553122 关于调优的建议: 1.出错时,可以查看操作系统日志,可能会找到一些有用的信息 2.尽量不要“批量”修改内核参数,笔者就曾这么干过,结果“ ...
- 安卓开发之自定义一个view弹出框
https://www.cnblogs.com/muyuge/p/6152167.html
- 用PRODUCT_COPY_FILES拷贝文件夹
拷贝文件PRODUCT_COPY_FILES += device/qcom/msm8909/media/media_profiles_8909.xml:system/etc/media_profile ...
- LDA背景资料
[https://zhuanlan.zhihu.com/p/30226687] LDA模型的前世今生 在文本挖掘中,有一项重要的工作就是分析和挖掘出文本中隐含的结构信息,而不依赖任何提前标注的信息.L ...
- VirtualBox下安装CentOS7系统
本文假定你已经知道如何安装VirtualBox虚拟机软件,并且已经安装好了. 首先我们需要准备好centos的iso镜像文件,可以从centos的官网下载. 以下操作使用的VirtualBox版本号是 ...
- 修改Devexpress DateEdit控件默认的日期格式和日历风格
最近项目中很多地方使用到DevExpress的DateEdit控件,而且设置都是一致(日期格式.选择日期的日历的风格等).每一次都需要设置太痛苦,因此需要寻找一种高效的解决方式. 一. 设置好一个作为 ...
- Asp.net Mvc、webApi配置允许跨域
Web.config 下<system.webServer> 节点下配置 <httpProtocol> <customHeaders> <add name=& ...
- 阿里八八β阶段Scrum(2/5)
今日进度 黄梅玲:尝试修复日程界面的不可点击问题 李嘉群:修改数据库,增加写入识别功能临时文本存入的项 张岳:信息抽取算法的编写 叶文滔:尝试侧边栏的信息调用,但因为侧边栏不是单独的活动,调用碰到了困 ...
- 课外知识----easy BCD
可以用来作系统之间的切换 使用方法略
- LCA树上倍增
LCA就是最近公共祖先,比如 节点10和11的LCA就是8,9和3的LCA就是3. 我们这里讲一下用树上倍增来求LCA. 大家都可以写出暴力解法,两个节点依次一步一步往上爬,直到爬到了相同的一个节点. ...