在项目开发的过程中，我们会经常用到一些图标。但是我们在使用这些图标时，往往会遇到失真的情况，而且图片数量很多的话，页面加载就越慢。所以，我们可以使用字体图标的方式来显示图标，字体图标任意放大缩小不会失真，也大大减少了请求数量，解决了图片占用资源的问题，非常好用。

IcoMoon 的使用：

　　1. 直接使用提供的图标

　　在网址：https://icomoon.io/app/#/select 选择相应图标，然后点击右下角 Generate Font 进行设置，完了点击下载，将下载文件解压，然后将 font 文件夹和 style.css 拷贝到项目中，引用css即可。

　　2. 根据设计提供的.svg文件自定义生成字体图标并应用

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

　　　　1）上传 （可以使用 在线转换工具 将 jpg,png 图片转成SVG）；

　　　　2）图标上传完成后，图标的背景使灰色的，然后选择需要的图标（选中后的背景会变白），点击右下角的 Generate Font，页面跳转。其中图标名称和编码可以自己定义，鼠标悬停会显示 Get Code，打开有使用示例；

　　　　3）点击右下角 Downlod 下载按钮，下载完成；

　　　　4）解压下载后的文件夹，我们需要的是 fonts文件夹 和 style.css, 将这两个文件放到项目中, style.css文件中引入了字体文件，所以要特别注意路径；

　　　　5）根据 css 文件下面生成的 class 类名，给元素添加相应的类名即可。

Iconfont 阿里巴巴图标库的使用：

　　1. 网址：https://www.iconfont.cn/ 搜索需要的图标；

　　2. 将图标加入购物车，点击页面右上角的购物车按钮，选择添加项目，将所选图标添加到自定义项目中（需要登录使用）；

　　3. 在跳转的页面中，点击下载至本地（下载的文件中 .html 介绍了 Unicode / Font Class / Symbol 引用方法）

Font Awesome 的使用：

　　1. 网址：http://www.fontawesome.com.cn/ 下载 Font Awesome 文件包；

　　2. 将 fonts文件夹 和 style.css 放到项目中，在<head>处加载font-awesome.css (或者font-awesome.min.css) 如下:

<link rel="stylesheet" href="../font-awesome/css/font-awesome.css">

　　3. 通过添加类名 fa  和图标的具体名称 fa-*  将图标放在任意位置（* Font Awesome 被设计为用于行内元素，比如用于<i>标签上）。

字体图标库 IcoMoon IconFont Font Awesome的使用的更多相关文章

  1. 字体图标库 iconfont、iconmoon 的维护管理与使用探索

    字体图标库的使用 这是之前留下的博客,由于一堆博客没写完,本周周末做了个补充,可能内容上会有点不太斜街,请见谅... 本文大部分内容是自己结合过往经验探索总结的字体图标维护方式 iconfont-阿里 ...

  2. vue引入iconfont阿里字体图标库以及报错解决

    下载阿里的字体图标库文件,放在\src\assets\font文件夹下面. 安装style-loader,css-loader和file-loader (或url-loader)  ,记得--save ...

  3. 在nuxt中引入Font Awesome字体图标库

    介绍 在element-ui框架中提供了一些图标样式,但是种类比较少,所以在这里提供一套更完善的字体图标库Font Awesome(官方文档),下面就开始介绍如何在一个nuxt项目中使用这套字体库. ...

  4. 阿里UX矢量图标库–最强大的矢量图标库（Icon font制作力荐工具）

    继前面介绍过ICON-FONT的制作后,找了几个ICON库都是国外的今天偶然发现阿里巴巴的图标矢量库,www.iconfont.cn用了之后感觉很强大,丰富的图标库(集合阿里妈妈&淘宝的图标库 ...

  5. css3 - 字体图标库使用方法

    一些字体图标库的网站 https://icomoon.io/app/#/selecthttp://www.iconfont.cn/http://www.bootcss.com/ http://www. ...

  6. jQuery插件fontIconPicker配合FontAwesome字体图标库的使用

    同样先上效果图: 怎么样,是不是很好看,jquery fontIconPicker这个插件做的很不错,支持分类,搜索,还有分页功能,可以自定义分页,具体的使用方法我就不一介绍了,我只说一下如何使用fo ...

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

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

  8. （22）bootstrap 初识 + Font Awesome(字体图标库)

    bootstrap作用就是简化布局 bootstrap是基于JQ的,所以内部代码使用的是jq语法 所以要使用bs,必须先倒入 1.head标签内倒入bs的css文件  <link rel=&qu ...

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

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

随机推荐

  1. Openstack oslo.config【一】

    OpenStack的项目貌似越来越多了,在Grizzly版之前,每个项目都得实现一套处理配置文件的代码.在每个项目的源码中基本上都可以找到openstack/common/cfg.py,inipars ...

  2. Junit4 之 Assert 静态方法介绍

    Junit中的assert方法全部放在Assert类中,总结一下junit类中assert方法的分类. 1.assertTrue/False([String message,]boolean cond ...

  3. struts2 在 Action 或 Interceptor 中获取 web.xml 中配置的 <context-param> 参数 （这是我的第一篇博文，哈哈。）

    最近为了改一个问题,想加一个控制开关,就在web.xml 中配置了一个 <context-param> 参数,并在 Action 或 Interceptor 中获取参数值. 1.在 web ...

  4. CentOS7 安装 MySQL8.0

    [1]安装步骤过程 (1)yum仓库下载MySQL 命令:yum localinstall https://repo.mysql.com//mysql80-community-release-el7- ...

  5. drools kie-server和kie-workbench安装手册

    Drools规则引擎可以直接在项目中编写drl文件,后调用. 也可以搭建kie-server和kie-workbench来进行远程调用. 关系: 在kie-workbench通过页面配置规则,发布到执 ...

  6. 最新QT4.8+kernel_3.2.5+uboot_2010.06+tslib移植成功-问题小结

    2012-02-19 21:34:13 都是从源码下载然后自己修改,使用与TQ2440,之前uboot其实已经完成了.但是yaffs2没带起来.现在回头看来是很简单的了.bootargs参数中我设置成 ...

  7. 小程序如何封装自定义组件（Toast）

    1.创建和pages 同级的component目录新建一个myToast目录 例如: 2.myToast.wxml文件内容: <!-- 自定义toast组件 --> <!-- nam ...

  8. Linux系统的目录结构及常见目录总结

    Linux系统的目录结构(必须掌握的内容) 所有目录只有一个顶点/(根),所有目录的起点. 只有一棵树 Linux的目录结构也是有规律的,而且也是按照类别组织的. 应用程序 /usr/bin 数据文件 ...

  9. 外网访问内网MariaDB数据库

    外网访问本地MariaDB数据库 本地安装了MariaDB数据库,只能在局域网内访问,怎样从公网也能访问内网MariaDB数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Mar ...

  10. VUE引入字体图标库

    1. 下载阿里图标 2. 解压文件,并复制文件到VUE项目内 3. 找到添加的字体图标的.css文件,将.iconfont改成[class^="iconfont"], [class ...