字体图标库 IcoMoon IconFont Font Awesome的使用
在项目开发的过程中，我们会经常用到一些图标。但是我们在使用这些图标时，往往会遇到失真的情况，而且图片数量很多的话，页面加载就越慢。所以，我们可以使用字体图标的方式来显示图标，字体图标任意放大缩小不会失真，也大大减少了请求数量，解决了图片占用资源的问题，非常好用。
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的使用的更多相关文章
- 字体图标库 iconfont、iconmoon 的维护管理与使用探索
字体图标库的使用 这是之前留下的博客,由于一堆博客没写完,本周周末做了个补充,可能内容上会有点不太斜街,请见谅... 本文大部分内容是自己结合过往经验探索总结的字体图标维护方式 iconfont-阿里 ...
- vue引入iconfont阿里字体图标库以及报错解决
下载阿里的字体图标库文件,放在\src\assets\font文件夹下面. 安装style-loader,css-loader和file-loader (或url-loader) ,记得--save ...
- 在nuxt中引入Font Awesome字体图标库
介绍 在element-ui框架中提供了一些图标样式,但是种类比较少,所以在这里提供一套更完善的字体图标库Font Awesome(官方文档),下面就开始介绍如何在一个nuxt项目中使用这套字体库. ...
- 阿里UX矢量图标库–最强大的矢量图标库（Icon font制作力荐工具）
继前面介绍过ICON-FONT的制作后,找了几个ICON库都是国外的今天偶然发现阿里巴巴的图标矢量库,www.iconfont.cn用了之后感觉很强大,丰富的图标库(集合阿里妈妈&淘宝的图标库 ...
- css3 - 字体图标库使用方法
一些字体图标库的网站 https://icomoon.io/app/#/selecthttp://www.iconfont.cn/http://www.bootcss.com/ http://www. ...
- jQuery插件fontIconPicker配合FontAwesome字体图标库的使用
同样先上效果图: 怎么样,是不是很好看,jquery fontIconPicker这个插件做的很不错,支持分类,搜索,还有分页功能,可以自定义分页,具体的使用方法我就不一介绍了,我只说一下如何使用fo ...
- uni-app在线引入阿里字体图标库
第一步 在app.vue中引入阿里字体图标库 第二步 在任意页面使用就可以了 <view class="item" v-for="(value,index) in ...
- （22）bootstrap 初识 + Font Awesome(字体图标库)
bootstrap作用就是简化布局 bootstrap是基于JQ的,所以内部代码使用的是jq语法 所以要使用bs,必须先倒入 1.head标签内倒入bs的css文件 <link rel=&qu ...
- vue中引入第三方字体图标库iconfont，及iconfont引入彩色图标
iconfont字体图标使用就不多说了,大致是几部: 1.在iconfont官网选图标,加入购物车,加入项目,下载到本地,解压 2.在项目assets目录新建目录iconfont,用于存放刚才下载解压 ...
随机推荐
- Sitecore 8.2 页面架构设计：模板与组件
介绍 Sitecore的开放式架构和众多API意味着在Sitecore中实施网站可能会在很多方向上发生偏差.架构的一个特别重要的方面涉及页面构建 - 如何构建Sitecore中的网页? Sitecor ...
- Halcon一维运算相关算子整理
Halcon一维离散函数算子 1. abs_funct_1d 计算一维数组的绝对值 2. compose_funct_1将两个离散的一维函数合并为一个函数 3. cre ...
- 多个for循环嵌套会影响速度
在复现Meta-SR的过程中,发现如果嵌套多个for 循环会使速度过慢.这是下面实验得出的结论: import time t1 = time.time() a = range(3000) b = ra ...
- Restful levels and Hateoas
RESTful: Rest是一种软件架构风格.设计风格,而不是标准,只是提供了一组设计原则和约束条件.它主要用于客户端和服务器交互类的软件.基于这个风格设计的软件可以更简洁,更有层次,更易于实现缓存等 ...
- nginx + keepalived 主从模式
转自:https://www.cnblogs.com/kevingrace/p/6138185.html 负载均衡技术对于一个网站尤其是大型网站的web服务器集群来说是至关重要的!做好负载均衡架构,可 ...
- 对八皇后的补充以及自己解决2n皇后问题代码
有了上次的八皇后的基础.这次准备解决2n皇后的问题,: //问题描述// 给定一个n*n的棋盘,棋盘中有一些位置不能放皇后.现在要向棋盘中放入n个黑皇后和n个白皇后,使任意的两个黑皇后都不在同一行./ ...
- Hadoop2-HDFS学习笔记之入门（不含YARN及MR的调度功能）
架构 Hadoop整体由HDFS.YARN.MapReduce三大部分组成,推荐架构参考:https://www.cnblogs.com/zhjh256/p/10573684.html. 注:2.x的 ...
- [Python数据挖掘]第8章、中医证型关联规则挖掘
一.背景和挖掘目标 二.分析方法与过程 1.数据获取 2.数据预处理 1.筛选有效问卷(根据表8-6的标准) 共发放1253份问卷,其中有效问卷数为930 2.属性规约 3.数据变换 ''' 聚类 ...
- ADO.Net的发展史
1.演变历史: 它们是按照这个时间先后的顺序逐步出现的,史前->ODBC->OLEDB->ADO->ADO.Net. 2.下面分别介绍一下这几个. a. 史前的数据访问是什么样 ...
- Thuwc 2019 & wc 2019 划水记
(此处不应有目录,爆零的过程应该慢慢看) Thuwc 2019 拖着箱子去广二,然后发现可以搬出去住酒店.好,然后箱子白搬了.Joker似乎说住宿体验极差,广二宿舍和林荫宿舍质量不相上下,想想wc时要 ...