Font Awesome使用简介
Font awesome是一种用字体来实现图标的CSS插件。
使用方法:
- 到http://fortawesome.github.io/Font-Awesome/ 下载代码包。
- 代码包解压到本地后,结构如下

- 在网页中引用css/font-awesome.css或者css/font-awesome.min.css
比如:
<link rel='stylesheet', href='font-awesome-4.3.0/css/font-awesome.min.css'/>
- 在网页中用如下的方式来显示图标。
<i class="fa fa-camera"></i>
效果如下:

既然是一种字体,就可以通过改变字体颜色和字体大小等属性来控制图片的显示方法。
|
<div> <i class="fa fa-camera" style="color:green;font-size:20px;"></i>camera </div> |
效果如下:

还可以旋转,加动态效果,更多例子可以参见:
http://fortawesome.github.io/Font-Awesome/examples/
- FontAwesome目前包含的所有图标列在这里:
http://fortawesome.github.io/Font-Awesome/icons/
Font Awesome使用简介的更多相关文章
- 更丰富的符号工具包 Font Awesome
我时常想要在此类文档中通过一些图形符号来表达更丰富的含义或是对段落进行标注,例如使用 Emoji.然而 Emoji 在这方面仍然有存在一些不足,如: 颜色与文字风格不统一, 在不同系统的平台上显示不统 ...
- 漂亮的title提示信息
<HTML> <HEAD> <title>一种很酷的文字提示效果演示</title> <style> .tableBorder7{width ...
- 将 Eclipse 的配色改为黑底白字
1.先到 eclipsecolorthemes下载一个主题. 2.Eclipse File-->Import 3.Import视窗内选择 General-->Preferences 4.选 ...
- 个人知识管理系统Version1.0开发记录(11)
(1)匹配单个属性的关键字:(2)匹配单个对象的关键字:(3)匹配对象集合的关键字:(4)基于事件驱动的:(5)实时搜索,参考win7的搜索功能. 1.备份,java代码,数据库数据. 2.oracl ...
- cms-幻灯片的实现
1.其实幻灯片的后台代码和之前的最新动态和推荐是一样的,只是前台遍历的时候不一样罢了 2.代码: 2.1:帖子mapper查询出幻灯片图片: <?xml version="1.0&qu ...
- cms-最近更新
在这一讲中有几个很重要的地方需要注意: 1.在查询帖子的时候需要把帖子类型id带到帖子类型表中把类型查询出来 2.在字帖子查询语句中用limt限制查询那个阶段的帖子 3.在界面显示的时候需要用到字符串 ...
- CSS3与页面布局学习总结(五)——Web Font与Sprite
一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...
- canvas简介
一.canvas简介 1.1 什么是canvas?(了解) 是HTML5提供的一种新标签 <canvas></canvas> 英 ['kænvəs] 美 ['kænvəs] 帆 ...
- 常用HTML标签元素结合及简介
常用HTML标签元素结合及简介 <html></html> 创建一个HTML文档<head></head> 设置文档标题和其它在网页中不显示的信息< ...
随机推荐
- codevs 5790 素数序数
5790 素数序数(筛素数版) 时间限制: 1 s 空间限制: 32000 KB 题目等级 : 黄金 Gold 题目描述 Description 给定一个整数n,保证n为正整数且在int范 ...
- BZOJ 1283 序列 费用流 网络流 线性规划
https://darkbzoj.cf/problem/1283 给出一个长度为N的正整数序列Ci,求一个子序列,使得原序列中任意长度为M的子串中被选出的元素不超过K(K,M<=100) 个,并 ...
- Go语言特点
作者:asta谢链接:https://www.zhihu.com/question/21409296/answer/18184584来源:知乎 1.Go有什么优势 可直接编译成机器码,不依赖其他库,g ...
- 让screen帮助你协同工作
Screen是系统管理员手中的一件利器,下面我把它介绍给你,相信你会和我一样,认可这个非常棒的软件 一,什么情况下会用到screen? 比如说,我们在运行一个非常费时间的程序,注意:可能我们是在通 ...
- [JAVA] JAVA JDK 安装配置
JDK 安装 下载安装 下载JDK 从oracle官方网站下载并安装JDK. 下载使用文档 从oracle官方网站下载使用帮助文档. 安装库源文件 源文件位于安装目录的 /Library/Java/J ...
- php curl伪造referer
CURL方式: SOCKET方式: file_get_contents方法: 通过上面的代码,我们就把referer地址伪装为http://www.xxxx.com,你可以写一段代码: $_SERVE ...
- SPOJ 10628. Count on a tree (树上第k大,LCA+主席树)
10628. Count on a tree Problem code: COT You are given a tree with N nodes.The tree nodes are number ...
- sqlite - Sqlite Wrappers - Delphi
http://www.sqlite.org/cvstrac/wiki?p=SqliteWrappers Aducom's SQLite: Open source (NewBSD) Delphi (4. ...
- IOS快速入门
http://www.cnblogs.com/wellsoho/p/4313312.html
- Remon Spekreijse CSerialPort串口类的修正版2014-01-10
转自:http://m.blog.csdn.net/blog/itas109/18358297# 2014-1-16阅读691 评论0 如需转载请标明出处:http://blog.csdn.net/i ...