常见字体图标库——font-awesome
1.简介
FontAwesome一种带有网页功能的象形文字语言,并收集在一个集合里。字库中有675个图标,只支持英文搜索,中文地址:http://www.fontawesome.com.cn/
2.使用方法
(1)在主页上下载最新版,压缩文件。
(2)不用修改文件名,将文件解压后,放到项目中
使用 CSS
- 复制
font-awesome
目录到你的项目中 - 在
<head>
处加载font-awesome.min.css如下。<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
使用 Sass or Less
使用 LESS or SASS 来个性化自定义Font Awesome 4.7.0
- 复制
font-awesome/
目录到你的项目中。 - 打开你项目中的
font-awesome/less/variables.less
或font-awesome/scss/_variables.scss
然后编辑@fa-font-path
或$fa-font-path
变量来指定字体目录。@fa-font-path: "../font";
字体的路径是相对于你CSS目录的。
- 如果你使用一个静态编译器,请重新编译你的 LESS 或 SASS。
当你已经知道 如何开始使用Font Awesome之后, 你就可以用<i>
标签包裹起来,用到你网站的任何地方。这里的一些例子也是来自于 Bootstrap文档.
(3)引用图标
你可以通过设置CSS前缀fa
和图标的具体名称,来把Font Awesome 图标放在任意位置。Font Awesome 被设计为用于行内元素(我们喜欢用更简短的<i>
标签,它的语义更加精准)。
<i class="fa fa-camera-retro"></i> fa-camera-retro
- 例如: 默认图标如果您修改了图标容器的字体大小,图标大小会随之改变。同样也适用于颜色,阴影,阴影等其它任何CSS支持的效果上。
(4)改变图标大小
为了增加图标大小相对于它们的容器, 使用 fa-lg
(33% 递增), fa-2x
, fa-3x
, fa-4x
, 或 fa-5x
classes.
<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x
- 如果你的图标顶部和底部被裁剪掉,请确保你有足够的行高。
(3)具体使用
基础图标
改变大小
设置固定宽度使图标对齐
列表中的图标
引用的效果
图标8个方位的旋转
任意旋转
图标组合
兼容Bootstrap组件
常见字体图标库——font-awesome的更多相关文章
- 在nuxt中引入Font Awesome字体图标库
介绍 在element-ui框架中提供了一些图标样式,但是种类比较少,所以在这里提供一套更完善的字体图标库Font Awesome(官方文档),下面就开始介绍如何在一个nuxt项目中使用这套字体库. ...
- jQuery插件fontIconPicker配合FontAwesome字体图标库的使用
同样先上效果图: 怎么样,是不是很好看,jquery fontIconPicker这个插件做的很不错,支持分类,搜索,还有分页功能,可以自定义分页,具体的使用方法我就不一介绍了,我只说一下如何使用fo ...
- css3 - 字体图标库使用方法
一些字体图标库的网站 https://icomoon.io/app/#/selecthttp://www.iconfont.cn/http://www.bootcss.com/ http://www. ...
- AngularCli项目中添加字体图标(Font)详解
本文主要讲如何在AngularCli生成的项目中使用字体图标. 一 SVG图标准备 将需要转换为字体图标的图片转换为SVG格式. 这个让项目视觉设计师搞定即可. 二 SVG图标转Font 可以通过Ic ...
- vue引入iconfont阿里字体图标库以及报错解决
下载阿里的字体图标库文件,放在\src\assets\font文件夹下面. 安装style-loader,css-loader和file-loader (或url-loader) ,记得--save ...
- 字体图标库 iconfont、iconmoon 的维护管理与使用探索
字体图标库的使用 这是之前留下的博客,由于一堆博客没写完,本周周末做了个补充,可能内容上会有点不太斜街,请见谅... 本文大部分内容是自己结合过往经验探索总结的字体图标维护方式 iconfont-阿里 ...
- uni-app在线引入阿里字体图标库
第一步 在app.vue中引入阿里字体图标库 第二步 在任意页面使用就可以了 <view class="item" v-for="(value,index) in ...
- 字体图标Icon Font
字体图标Icon Font 前段时间研究怎样做字体图标,在网上查找诸多资料,诸多尝试,找到一套可以自己制作自己独立控制的制作流程,公司按照这套流程形成一套自己公司图标,本人目前所在公司已经在使用没有发 ...
- 字体图标库 IcoMoon IconFont Font Awesome的使用
在项目开发的过程中,我们会经常用到一些图标.但是我们在使用这些图标时,往往会遇到失真的情况,而且图片数量很多的话,页面加载就越慢.所以,我们可以使用字体图标的方式来显示图标,字体图标任意放大缩小不会失 ...
随机推荐
- 18 12 18 给服务器添加logging 日志功能
Python中有个logging模块可以完成相关信息的记录,在debug时用它往往事半功倍 1. 日志级别 日志一共分成5个等级,从低到高分别是: DEBUG INFO WARNING ERROR C ...
- 从1到n整数中1的个数
[问题]求出1~13的整数中1出现的次数,并算出100~1300的整数中1出现的次数?为此他特别数了一下1~13中包含1的数字有1.10.11.12.13因此共出现6次,但是对于后面问题他就没辙了.A ...
- Maven:maven依赖jar包冲突处理
Maven多模块项目中偶尔会遇到这种问题:明明项目中相关的jar包已经通过pom.xml引进来了,还是报错找到不到相关的类的错误.这种时候,基本上可以断定是jar包冲突的问题. 很多情况下jar包会通 ...
- Spring 中将service 注入到普通的工具类中
记录一下,防止忘记. 要求每次生成一个和数据库不重复的组队码,于是就想在工具类中加入service注入 方法1(红框是注意的地方)
- filter的原理(转)
今天学习了一下javaweb开发中的Filter技术,于是在网上搜了一下相关资料,发现这篇博客写的很不错,于是希望能转载过来以备以后继续学习之用.(原:http://www.cnblogs.com/x ...
- MySQL高负载优化
MySQL配置文件优化 [client] port = #客户端端口号为3306 socket = /data//mysql.sock # default-character-set = utf8 # ...
- 直击JDD | 徐雷:智能化零售,以技术为驱动力的突破路径
"京东零售已经成为一家典型的以技术驱动为主的零售公司".在11月19日召开的 2019京东全球科技探索者大会上,京东零售集团CEO徐雷首次阐释了京东零售的智能化零售路径. 徐雷指出 ...
- maxima安装&使用
环境: mint 19 或者 > ubuntu 18 源代码安装的好处, 可以使用最新版. mint 19.1 下面, 利用apt 直接安装的maxima版本太老,不支持 draw 函数. lo ...
- css选择器,选择指定属性的值
选择属性为href的值: <a class='test' href='www.baidu.com' >test</a> response.css('.test::attr(hr ...
- dockerfile---apt-get install vim 时 Unable to locate package vim
在学习 dockerfile 的时候,发现编写的 Dockerfile 中的 apt-get install 命令无法找到要安装的包,所以记录一下这次发生的错误. 环境:宿主机:windows 10 ...