前言

有问题可以随时提问,评论私信,只要我有时间我都会第一时间回复。当大家发现这篇文章不适用的时候烦请告知下,我好做好更改!

本地引入

下载好的字体图标放在static目录下,我是自己又创建了一个iconfont目录便于区分,我是全引入的,如果后面出现问题再更改

引入

在App.vue中引用

@import "./../static/iconfont/iconfont.css";

重新编译

$ npm run build

使用

<div class=" iconfont icon-shouqbula">1</div>

效果

在线引入

这个其实就是把本地的iconfont的文件里的本地地址替换成线上的地址,好处显而易见的是本地文件包小了,但是如果网络不好肯定会造成暂时的iconfont丢失的情况

生成在线链接

进入阿里巴巴的官网,再进入到自己的项目中,如果没有生成过在线链接,点下即可生成。

替换链接

本地的iconfont的所有文件都可删除,只留一个css的即可。

然后将复制的在线链接替换到本地即可。

引入

这里我们换个方法在main.js中引入,其实在main.js和APP.vue中引入,并无过大的区别。

main.js 是我们的程序入口文件,主要作用是初始化vue实例并使用需要的插件

App.vue是我们的主组件,页面入口文件 ,所有页面都是在App.vue下进行切换的。也是整个项目的关键,app.vue负责构建定义及页面组件归集。

编译

新增页面或者文件的时候都需要重新build,如果只是改动代码的话只需要npm run dev即可

$ npm run build

使用

<div class=" iconfont icon-shouqbula">1</div>

效果

mpvue——引入iconfont字体图标的更多相关文章

  1. 小程序入坑(一)---如何引入iconfont 字体图标

    最近一直忙于日常任务,其实是懒癌又犯了..........不过因为自己的“懒癌”,“不思进取”给自己挖了不少坑. 一,小程序工具的安装 打开简易小程序的官网https://mp.weixin.qq.c ...

  2. uni-app引入iconfont字体图标

    1 首先进入你的iconfont项目 很好, 看见圈圈的吗 , 我说蓝色的,记住了,选到这个 ,然后点击下载本地项目, 解压完就是这个了 ,然后把 圈起来的放到你的项目文件里面 ,记得引入的时候路径别 ...

  3. vue中引入第三方字体图标库iconfont,及iconfont引入彩色图标

    iconfont字体图标使用就不多说了,大致是几部: 1.在iconfont官网选图标,加入购物车,加入项目,下载到本地,解压 2.在项目assets目录新建目录iconfont,用于存放刚才下载解压 ...

  4. vue-cli 引入阿里巴巴字体图标:注意点

    vue-cli 引入阿里巴巴字体图标:注意点 下载的 iconfont.css 文件中: .iconfont { font-family:"iconfont" !important ...

  5. uni-app在线引入阿里字体图标库

    第一步 在app.vue中引入阿里字体图标库 第二步 在任意页面使用就可以了 <view class="item" v-for="(value,index) in ...

  6. iconfont字体图标和各种CSS小图标

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! iconfont字体图标 我们的需求中,很多时候会看到一些小的图形,或者叫图标,比如天猫网站中:     ...

  7. css 小图标 & iconfont 字体图标

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! iconfont 字体图标 我们的需求中,很多时候会看到一些小的图形,或者叫图标,比如天猫网站中:     ...

  8. iconfont字体图标的使用方法--超简单!

    我之前因为项目用bootstrap比较多,所以使用font awesome字体图标比较多,后来接触到了iconfont,发现想要的什么图标都有,还可以自定义图标,非常强大!之前看了一波教程,觉得繁琐, ...

  9. 关于iconfont字体图标的使用

    今天用iconfont遇到了字体图标的使用问题.关于使用字体图标的方式在这里有介绍三种方式(css和js的引入和平时一样) 首先你要分清是用单个字体图标icon,还是多个字体图标icon 关于使用代码 ...

随机推荐

  1. 43.Odoo产品分析 (四) – 工具板块(11) – 网站即时聊天(1)

    查看Odoo产品分析系列--目录 在线聊天可以实现与顾客的在线实时交流,比如在"商店"功能中实现顾客对客服的商品咨询等类似的操作.  安装"网站即时聊天"模块: ...

  2. sql左外连接和右外连接的区别例子转摘

    sql左外连接和右外连接的区别   两个表:A(id,name)数据:(1,张三)(2,李四)(3,王五)B(id,name)数据:(1,学生)(2,老师)(4,校长) 左连接结果:select A. ...

  3. Windows 更快捷方便的安装软件,命令提示符上安装 Chocolatey

    在命令提示符上安装 Chocolatey @powershell -NoProfile -ExecutionPolicy unrestricted -Command "iex ((new-o ...

  4. windows批处理添加AD域账户

    因为要用个批处理命令在Windows Server里面批量添加域用户,所以需要使用批处理命令. 我这篇是纯新手教程,在百度上搜了一些批处理命令感觉属于进阶教程,研究了两天才完成我要完成的目标. 下面从 ...

  5. Bootstrap -- 初见 Bootstrap

    Bootstrap -- 初见 Bootstrap Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. ...

  6. thinkphp v5.1 开发笔记

    一.安装TP5.1 1.使用git安装 <1>下载Tp git clone https://github.com/top-think/think tp5 <2>安装核心库 gi ...

  7. python进阶之正则表达式

    概念: 正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符.及这些特定字符的组合,组成一个“规则字符串”,这个“规则字符串”用来表达对字符串的一种过滤逻辑. 目的? 给定一个正则表 ...

  8. django 模型层(2)

    Django 模型层(2) 多表操作---模型之间的关系 1 一对一:作者----作者详细信息 2 一对多:书籍----出版社 3 多对多:书籍----作者 一  创建模型(主键(id)自动创建) 没 ...

  9. json 解析错误的问题

    “/”应用程序中的服务器错误. 未能加载文件或程序集“Newtonsoft.Json, Version=6.0.0.0, Culture=neutral, PublicKeyToken=30ad4fe ...

  10. HBase案例:HBase 在人工智能场景的使用

    近几年来,人工智能逐渐火热起来,特别是和大数据一起结合使用.人工智能的主要场景又包括图像能力.语音能力.自然语言处理能力和用户画像能力等等.这些场景我们都需要处理海量的数据,处理完的数据一般都需要存储 ...