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. DHTML和HTML有什么区别？有什么不同

    DHTML和HTML有什么区别?有什么不同 首先Dynamic HTML是一种制作网页的方式,而不是一种网络技术(就像JavaScript和ActiveX):它也不是一个标记.一个插件或者是一个浏览器 ...

  2. djongo form.is_valid 返回false的解决方法

    在用djongo编写网站时,有时点击提交按钮之后,并未提交,通过debug会发现是form.is_valid()返回false造成的.但是,具体原因往往并不容易找. 这时在提交的html中添加如下代码 ...

  3. Codeforces Round #489 (Div. 2)

    A. Nastya and an Array time limit per test 1 second memory limit per test 256 megabytes input standa ...

  4. [HDU5343]MZL's Circle Zhou

    题目大意: 给你两个字符串a和b,从中分别取出子串x和y,求不同的x+y的个数. 思路: 对于每一个字符串,构建SAM. 为了保证相同的x+y不会被重复统计,我们可以想办法只统计相同的x+y中x最长的 ...

  5. 删除JBOSS eap4.3下的jmx-console、web-console、ws-console、status服务

    来源:http://iffiffj.iteye.com/blog/1404148 把下面代码保存为BAT文件,并放到JBOSS节点中运行. @echo off set HOME=%~dp0 set j ...

  6. 解耦你的HTML,CSS和JAVASRIPT

    注:本文为翻译文章,原文<Decoupling Your HTML, CSS, and JavaScript> 今天在web上任何大一点的网站或应用程序都包含大量的html,css和jav ...

  7. UVA 350 Pseudo-Random Numbers

     Pseudo-Random Numbers  Computers normally cannot generate really random numbers, but frequently are ...

  8. HDU 1754 I Hate It 线段树RMQ

    I Hate It Time Limit: 1 Sec  Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=175 ...

  9. tsinsen A1067. Fibonacci数列整除问题 dp

    A1067. Fibonacci数列整除问题 时间限制:1.0s   内存限制:512.0MB   总提交次数:2796   AC次数:496   平均分:51.83 将本题分享到:     查看未格 ...

  10. [置顶] iOS中让省略号垂直居中

    在显示等待框时,一般要求在提示信息后面加个省略号,但中文输入法下输入的省略号是在底部对齐,但中 文的习惯是省略号垂直居中对齐,最后找到下面这个方法来显示垂直居中的省略号: 中文和英文输入法下一样: o ...