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

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. Grid move

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  2. Install rapyuta client on Ubuntu14.04

    # -Rapyuta-installation-in-Ubuntu14.04-LTS-Trusty-This gzip folder is a tested version which can ins ...

  3. laravel 核心类Kernel

    vendor/laravel/framework/src/Illuminate/Foundation/Http/Kernel.php.是laravel处理网络请求的最核心类,在app容器准备好了之后, ...

  4. wm_concat函数的排序问题

    wm_concat在行转列的时候非常有用,但在行转列的过程中的排序问题常常难以控制. 可见下面例子: 准备测试表: drop table t; create table t (n number,m n ...

  5. Git 教程(二):提交和回退

    我们已经成功地添加并提交了一个readme.txt文件,现在,是时候继续工作了,于是,我们继续修改readme.txt文件,改成如下内容: Git is a distributed version c ...

  6. FREERTOS学习笔记

    2012-02-25 21:43:40 为提升自己对实时操作系统(RTOS)的认识,我学习了freeRTOS. 理解了OS任务的状态.优先级的概念.信号量的概念.互斥的概念.队列.内存管理.这都是和R ...

  7. Win10环境下 HTTP 错误 500.19 - Internal Server Error 问题及其解决方法

    记一下今日份小bug... 明天要做软件架构实验了,今天打算测试下运行web项目,于是乎,找出了以前用JSP写的web项目测试运行不了,我再打开浏览器测试Tomcat服务器,在地址栏键入http:// ...

  8. python各种转义字符

  9. Linux 内存泄漏检查工具 valgrind

    抄自<从零开始的JSON库教程>,先mark一下,以后再慢慢研究. ======== 引用分割线 ======== 在 Linux.OS X 下,我们可以使用 valgrind 工具(用 ...

  10. JavaScript核心--Function

    什么是: 保存一段可重用的代码段的对象 何时: 只要一段代码可能反复使用时,都要封装为函数,反复调用函数 如何: 创建: 3种: 1. 直接量: function 函数名(参数列表){ 函数体; re ...