网址：https://icomoon.io/app/#/select；

特点：样式多，免费

操作：

1.相中的，随便点，不要钱，generat fonts然后download，得到一个压缩文件，解压，打开demo.html文件，在控制台可以看到每个标签的class名。

2，把style.css和font文件夹放到vue的static里（当然你也可以放在别的地方，只要vue里就可以）。

3，在vue的index.html里添加<link rel="stylesheet" href="static/style.css">引入；

4，此后，哪里需要图标，只要加个span标签，让它class名是你需要的标签的class名，他们就可以显示。

当然，你还可以在那网址上改标签，edit

vue中的图标字体引入的更多相关文章

  1. vue中使用svg字体图标

    1.在src/ 下面新建目录icons,里面新建文件夹svg,和文件index.js .svg用于存放从iconfont下载下来的svg格式的图标,index.js用于引入使用到svg文件和对应的组件 ...

  2. vue中使用特殊字体

    有时候为了个性化,可能需要为部分字体添加特殊的font-family 在static文件夹中创建font文件夹,内容如下: css内容如下: @font-face { font-family: vue ...

  3. iOS中iconfont(图标字体)的基本使用

    前言 近日在做项目时,项目组有提出iconfont的技术,便开始查询相关资料.iconfont技术的主要目的是为减少应用体积而生.首先icon代表图标 font代表字体.此技术便是将图标转化为字体,从 ...

  4. vue中svg图标使用

    在前端开发中,经常会用到svg图标,在vue开发的中,经常会借助一些第三方插件,经常用的有vue-svg-icon,基本使用步骤为: 1.安装插件(会提示没有安装xml-loader,只需要安装下xm ...

  5. vue中鼠标移入字体下面显示颜色并改变字体颜色的问题

    <template> <div class="smart_nav" :class="{'fixedTop':fixedTop}"> &l ...

  6. vue中引入字体文件

    在用vue来写一官网的时候,想引入外部字体文件,毕竟总感觉他自己的字体有点难看,在这里记录下 1.先下载字体文件所需的.ttf文件 我这里想引入的是华文行楷字体 百度后下载了一个3M多的ttf文件 2 ...

  7. 学习WPF——使用Font-Awesome图标字体

    图标字体介绍 在介绍图标字体之前,不得不介绍图标格式ICON ICON是一种图标格式,我们操作系统中各种应用程序都包含一个图标 比如QQ程序的图标是一个可爱的企鹅,我的电脑是一个显示器图标 ----- ...

  8. 老爷车IE8如何兼容图标字体

    前言 首先这个标题再详细的说就是如何解决font-face在IE8下间歇性出现图标字体渲染失败的解决方案. 如果你还不知道什么是图标字体,可以先阅读:链接1,链接2,链接3 先看在IE8下的问题: 而 ...

  9. 图标字体的使用(fontello.com)字体推荐及使用技巧

    网页设计中为了页面漂亮好看,图标是少不了,网页中使用的图标通常都是使用图片,使用图片图标的有很多弊端,如果你经常制作网页应该有一肚子埋怨. 使用图片图标的弊端 放大图标必须重新作图, 改变颜色必须开启 ...

随机推荐

  1. [转]通过设置nginx的client_max_body_size解决nginx+php上传大文件的问题

    转:http://blog.csdn.net/zhengwish/article/details/51602059 通过设置nginx的client_max_body_size解决nginx+php上 ...

  2. 基于Cesium的demo赏析

    更新于2019.2.23 Cesium的强大不用多说,所以有很多政府.组织基于cesium做了一些应用,其中不乏有很多优秀的示例,我们大都可以从中获得对自己的项目有益的东西.另:有的网站需要FQ. 官 ...

  3. 【Geek软技能】程序员，为什么写不好一份简历？

    一份好简历会是一份好工作的开端. 为什么?沧海也会遗珠   简历,是如此重要,它是获得一份满意工作的敲门砖,但不同的简历敲门的声响可不同. 但很多时候简历给人的感觉也似乎微不足道,因为没有人会真正细致 ...

  4. Xtrabackup简介

    Xtrabackup是由 Percona 开发的一个开源软件,可实现对 InnoDB 的数据备份,支持在线热备份(备份时不影响数据读写),特点如下: 备份过程快速.可靠: 备份过程不会打断正在执行的事 ...

  5. Jexus 5.4.6 on CentOS 6.6

    Mono 通过脚本安装 https://github.com/cjy37/linux-asp.net-installScript 版本 3.10 MongoDB 也可通过以上脚本安装 默认端口 270 ...

  6. 配置logback

    相关组件] Logback是由log4j创始人设计的又一个开源日志组件. logback当前分成三个模块:logback-core.logback- classic和logback-access. l ...

  7. Zabbix 3.4过滤多余的windows网卡监控

    在服务器上安装了zabbix 3.4.14之后,zabbix自动发现规则Network interface discovery会自动发现windows服务器上的所有网卡信息,包括一大堆的虚拟网卡等等, ...

  8. 关于web项目创建后WEB-INF下面没有出现web.xml的解决方法

    提供两种解决方案: 第一种:创建完项目后,需要手动创建出web.xml 第一步:选取创建的项目名称右击 第二步:eclipse的同学找到 java EE Tools 中的 下图画圈部分.  MyEcl ...

  9. LZW算法PHP实现方法 lzw_decompress php

    LZW算法PHP实现方法 lzw_decompress php 博客分类: Php / Pear / Mysql / Node.js   LZW算法简介 字符串和编码的对应关系是在压缩过程中动态生成的 ...

  10. 基于jQuery扁平多颜色选项卡切换代码

    基于jQuery扁平多颜色选项卡切换代码,支持自动轮播切换,鼠标滑过切换的jQuery特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=" ...