Font Awesome使用简介

?

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/

    ?

时间： 2024-11-07 07:07:00

Font Awesome使用简介的相关文章

更丰富的符号工具包 Font Awesome

我时常想要在此类文档中通过一些图形符号来表达更丰富的含义或是对段落进行标注,例如使用 Emoji.然而 Emoji 在这方面仍然有存在一些不足,如: 颜色与文字风格不统一, 在不同系统的平台上显示不统一, 种类有限,很多时候找不到合适的表情. 这时,可以在文档写作时引入另一个更丰富的符号工具包 Font Awesome. 简介 Font Awesome 是一个字体和图标工具包,包含人物.动物.建筑.商业.品牌等等各种主题丰富的图标符号,可以通过相应的语法添加在 Markdown 文档中,像 Em

cms-幻灯片的实现

1.其实幻灯片的后台代码和之前的最新动态和推荐是一样的,只是前台遍历的时候不一样罢了 2.代码: 2.1:帖子mapper查询出幻灯片图片: <?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE mapperPUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.d

cms-最近更新

在这一讲中有几个很重要的地方需要注意: 1.在查询帖子的时候需要把帖子类型id带到帖子类型表中把类型查询出来 2.在字帖子查询语句中用limt限制查询那个阶段的帖子 3.在界面显示的时候需要用到字符串截取标签和日期时间标签 2.代码实现 2.1创建帖子类: package com.open1111.entity; import java.util.Date; /** * 帖子实体类 * @author user * */public class Article { private Integer

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

关 键 字 搜 索 (1)匹配单个属性的关键字:(2)匹配单个对象的关键字:(3)匹配对象集合的关键字:(4)基于事件驱动的:(5)实时搜索,参考win7的搜索功能. 1.备份,java代码,数据库数据. 2.oracle数据库,用户操作. (1)查看数据库默认表空间. select * from database_properties;(2)创建用户create user 用户名 identified by 密码 默认表空间 临时表空间create user dyl identified by

html简介

一.HTML简介 1.1什么是HTML l         HTML(HyperText Mark-up Language)即超文本标记语言或超文本标签语言. l         何为超文本:"超文本"可以实现页面内可以包含图片.链接,甚至音乐.程序等. l         网页文件本身是一种文本文件,它通过标记符号来标记要显示的网页中的各个部分. l         何为标记:当浏览器遇到对应的标签符号时 就实现对应的功能! l         网页文件扩展名:.html  或 .h

[原创]java WEB学习笔记44：Filter 简介，模型，创建，工作原理，相关API，过滤器的部署及映射的方式，Demo

本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱好者,互联网技术发烧友 微博:伊直都在0221 QQ:951226918 ---------------------------------

html练习——个人简介

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

【IOS 开发】IOS 开发 简介 (IOS项目文件 | MVC 模式 | 事件响应机制 | Storyboard 控制界面 | 代码控制界面 | Retina 屏幕图片适配)

一. IOS 项目简介 1. IOS 文件简介 创建一个 HelloWorld 项目, 在这个 IOS 项目中有四个目录 : 如下图; -- HelloWorldTests 目录 : 单元测试相关的类和资源; (1) HelloWorld 目录 HelloWorld 目录介绍 : -- 命名规则 : 该目录名称与 IOS 项目名称相同, 是主目录; -- 存放内容 : IOS 项目的 源码文件, 界面设计文件, 资源文件都存放在该目录下; -- 源文件 : Objective C 的 .m 和

Sass入门——简介+语法格式及编译调试

本文来自慕课网大漠. Sass简介 Sass和SCSS区别 1.后缀名不同,很好理解 2.Sass以严格的缩进语法规则书写,不带大括号和分号:而SCSS的语法规则和CSS的语法很类似. Sass: $font-stack: Helvetica, sans-serif //定义变量 $primary-color: #333 //定义变量 body font: 100% $font-stack color: $primary-color SCSS: $font-stack: Helvetica, s