Font awesome是一种用字体来实现图标的CSS插件。

使用方法：

  1. 到http://fortawesome.github.io/Font-Awesome/ 下载代码包。
  2. 代码包解压到本地后，结构如下

  3. 在网页中引用css/font-awesome.css或者css/font-awesome.min.css

    比如：

    <link rel='stylesheet', href='font-awesome-4.3.0/css/font-awesome.min.css'/>

  4. 在网页中用如下的方式来显示图标。

    <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/

 

  1. FontAwesome目前包含的所有图标列在这里：

    http://fortawesome.github.io/Font-Awesome/icons/

     

Font Awesome使用简介的更多相关文章

  1. 更丰富的符号工具包 Font Awesome

    我时常想要在此类文档中通过一些图形符号来表达更丰富的含义或是对段落进行标注,例如使用 Emoji.然而 Emoji 在这方面仍然有存在一些不足,如: 颜色与文字风格不统一, 在不同系统的平台上显示不统 ...

  2. 漂亮的title提示信息

    <HTML> <HEAD> <title>一种很酷的文字提示效果演示</title> <style> .tableBorder7{width ...

  3. 将 Eclipse 的配色改为黑底白字

    1.先到 eclipsecolorthemes下载一个主题. 2.Eclipse File-->Import 3.Import视窗内选择 General-->Preferences 4.选 ...

  4. 个人知识管理系统Version1.0开发记录（11）

    (1)匹配单个属性的关键字:(2)匹配单个对象的关键字:(3)匹配对象集合的关键字:(4)基于事件驱动的:(5)实时搜索,参考win7的搜索功能. 1.备份,java代码,数据库数据. 2.oracl ...

  5. cms-幻灯片的实现

    1.其实幻灯片的后台代码和之前的最新动态和推荐是一样的,只是前台遍历的时候不一样罢了 2.代码: 2.1:帖子mapper查询出幻灯片图片: <?xml version="1.0&qu ...

  6. cms-最近更新

    在这一讲中有几个很重要的地方需要注意: 1.在查询帖子的时候需要把帖子类型id带到帖子类型表中把类型查询出来 2.在字帖子查询语句中用limt限制查询那个阶段的帖子 3.在界面显示的时候需要用到字符串 ...

  7. CSS3与页面布局学习总结（五）——Web Font与Sprite

    一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...

  8. canvas简介

    一.canvas简介 1.1 什么是canvas?(了解) 是HTML5提供的一种新标签 <canvas></canvas> 英 ['kænvəs] 美 ['kænvəs] 帆 ...

  9. 常用HTML标签元素结合及简介

    常用HTML标签元素结合及简介 <html></html> 创建一个HTML文档<head></head> 设置文档标题和其它在网页中不显示的信息< ...

随机推荐

  1. django中缓存配置

    # ======缓存配置====== CACHES = { ## 虚拟缓存,开发调试版本,此为开始调试用,实际内部不做任何操作 # 'default': { # 'BACKEND': 'django. ...

  2. luoguP5108 仰望半月的夜空 [官方？]题解 后缀数组 / 后缀树 / 后缀自动机 + 线段树 / st表 + 二分

    仰望半月的夜空 题解 可以的话,支持一下原作吧... 这道题数据很弱..... 因此各种乱搞估计都是能过的.... 算法一 暴力长度然后判断判断,复杂度\(O(n^3)\) 期望得分15分 算法二 通 ...

  3. POI2018

    [BZOJ5099][POI2018]Pionek(极角排序+two pointers) 几个不会严谨证明的结论: 1.将所有向量按极角排序,则答案集合一定是连续的一段. 当答案方向确定时,则一个向量 ...

  4. python日常碎碎念

    关于取命令行中参数的方法 1,sys.argv 这个方法自动获取参数,并split.一般情况下第一个元素是程序的名字.即 python script.py arg1 arg2 然后sys.argv返回 ...

  5. Codeforces Round #352 (Div. 2) A. Summer Camp 水题

    A. Summer Camp 题目连接: http://www.codeforces.com/contest/672/problem/A Description Every year, hundred ...

  6. php中赋值和引用真真的理解

    php的引用(就是在变量或者函数.对象等前面加上&符号) //最重要就是 删除引用的变量 ,只是引用的变量访问不了,但是内容并没有销毁 在PHP 中引用的意思是:不同的名字访问同一个变量内容. ...

  7. weblogic安装使用: Could not Create the Java Virtual Machine

    第一次使用weblogic,完全不明白是怎么一回事!找安装包花了大把时间!找到了不知道怎么安装 -- _ --||| 找了一篇安装文档<weblogic 安装部署手册.doc>, 位于:[ ...

  8. Redis在Windows+linux平台下的安装配置(转)

    window平台Redis安装 下载地址: http://code.google.com/p/servicestack/wiki/RedisWindowsDownload Redis文件夹有以下几个文 ...

  9. 使用Chrome快速实现数据的抓取（四）——优点

    些一个抓取WEB页面的数据程序比较简单,大多数语言都有相应的HTTP库,一个简单的请求响应即可,程序发送Http请求给Web服务器,服务器返回HTML文件.交互方式如下: 在使用DevProtocol ...

  10. Struts2 JSONObject的使用

    一.jar包 使用之前必须引入所须要的jar包,这里包含Struts2和JSONObject各自所必须的 Struts2: commons-fileupload-1.2.1.jarcommons-io ...