原文链接:https://blog.csdn.net/weixin_39818813/article/details/80695750

1.首先去阿里巴巴矢量图标库区把你要图标加到购物车

阿里巴巴矢量图标网http://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2

2.把选好的图标下载到本地

3.然后把下载好的几个文件加到项目里面。

4.去配置文件

去app.vue里面全局配置字体文件

也可以在main.js里面配置,配置如下:

import './style/iconfont.css';
注意要加./表示当前文件,不然会报错,不加的话webpack会把
style当做模板来处理

mpvue怎么使用iconfont的更多相关文章

  1. mpvue小程序开发之 iconfont图标引入

    背景: mpvue进行小程序项目开发时候,会有很多图标需求,但是小程序官方提供的icon图标库实在有限而且也不利于调样式,所有想到和之前前端项目一样引入iconfont. 图标加入购物车及项目 下载到 ...

  2. mpvue——引入iconfont字体图标

    前言 有问题可以随时提问,评论私信,只要我有时间我都会第一时间回复.当大家发现这篇文章不适用的时候烦请告知下,我好做好更改! 放置 下载好的字体图标放在static目录下,我是自己又创建了一个icon ...

  3. mpvue——仿QQ【一】

    前言 原生仿QQ https://github.com/wangyang0210/Imitate-QQ-For-Mini-Program 这个是当时学习小程序时,模仿的一个demo,只不过是纯页面没啥 ...

  4. mpvue开发美团外卖点餐小程序

    mpvue-meituan mpvue-meituan 是一款使用mpvue开发的实战小程序项目,完全仿制美团官方外卖点餐小程序开发而成,项目的框架结构完全按照企业开发架构搭建而成.结合了原生小程序的 ...

  5. mpvue + vant + flyio 小程序项目总结

    vant 的使用 我开始是 npm 导入,然后 import,使用不了. 找了各种方法,最后还是下载文件,然后找到 dist 文件夹,复制到项目里,我是放在 static 文件夹,文件名 dist 重 ...

  6. 起手一个mpvue项目准备

    1,环境配置(http://mpvue.com/mpvue/quickstart.html) //全局安装vue-cli3脚手架 npm install -g @vue/cli @vue/cli-in ...

  7. 小程序的初次遇见,使用mpvue搭建模板

    由于公司业务需求的需要,在这一周需要开发小程序,加急看了下小程序的文档,发现用其原生来编写程序不是很顺手,公司前端用的技术栈是vue, 询问了谷哥和度娘发现大部分推荐了 wepy和 mpvue,对比了 ...

  8. iconfont使用,亲测

    iconfont对于前端应用来说有很多便捷: 1.自由变化大小 2.自由修改颜色 3.可以添加一些视觉效果如:阴影.旋转.透明度. 4.兼容IE6 在线引用和下载到本地两种方法 一.在线引用 图标的制 ...

  9. 如何使用IconFont字体图标代替网页图片?

    一.IconFont的优点 1.轻量性 可以减少http请求,可以配合html5离线存储做性能优化,有利于后期维护. 2.灵活性 可以自由变换IconFont大小(不失真),可以修改IconFont颜 ...

随机推荐

  1. 大数据存储利器 - Hbase 基础图解

    由于疫情原因在家办公,导致很长一段时间没有更新内容,这次终于带来一篇干货,是一篇关于 Hbase架构原理 的分享. Hbase 作为实时存储框架在大数据业务下承担着举足轻重的地位,可以说目前绝大多数大 ...

  2. Vulnhub 靶场 Os-hackNos WP

    About Os-hackNos 描述 Difficulty : Easy to Intermediate Flag : 2 Flag first user And second root Learn ...

  3. 在eclipse里面给maven项目打包

    eclipse中的“maven install”是用maven打包工程的意思. mvn install 是将用户打包好的jar包安装到本地仓库中,一般没有设置过的话默认在用户目录下的 .m2\下面. ...

  4. 更新Linux服务器时间

    1.修改系统时区(不修改的话,你同步时间会发现总是不对) ln -sf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime --这里我修改为了上海 2.安 ...

  5. 基于Docker搭建Nginx图片服务器

    前言 一般开发中,都会把图片上传到一个目录,然后将目录和文件名拼接存储在数据库中,但是,这种方法如果没弄好的话可能有一定的缺陷. 若项目搬迁,即时这台服务器本身还在用,存放在服务器的跟项目相关的图片也 ...

  6. 目标检测 | RetinaNet:Focal Loss for Dense Object Detection

    论文分析了one-stage网络训练存在的类别不平衡问题,提出能根据loss大小自动调节权重的focal loss,使得模型的训练更专注于困难样本.同时,基于FPN设计了RetinaNet,在精度和速 ...

  7. 《闲扯Redis一》五种数据类型之String型

    一.前言 Redis 提供了5种数据类型:String(字符串).Hash(哈希).List(列表).Set(集合).Zset(有序集合),理解每种数据类型的特点对于redis的开发和运维非常重要. ...

  8. 洛谷 P5639 【CSGRound2】守序者的尊严 题解

    原题链接 简要题意: 从 \(1\) 号位开始走,可以连续走过一段连续的 \(0\) ,每走一次,所有位置取反. (即 \(0 \gets 1\),\(1 \gets 0\)). 算法一 模拟暴力即可 ...

  9. Building Applications with Force.com and VisualForce(Dev401)(十八):Visualforce Pages: Introduction to Visualforce

    Dev401-020:Visualforce Pages: Introduction to Visualforce Course Objectives1.Understand the benefits ...

  10. Nginx Rewrite规则的break和last示例

    break和last各自的作用 官方解释 last:stops processing the current set of ngx_http_rewrite_module directives fol ...