第一次使用 Font Awesome 发现相当的爽呀!它的图标很全,能够帮你节约时间去找图片。下面就来一起学习吧:

1: 去官方网站下载解压 http://fontawesome.io/

2: 解压后拷贝到你的项目中再引入到你的文件里面 如下: 
<link rel="stylesheet" type="text/css" href="font-awesome-4.0.3/css/font-awesome.css" />
3: 开始使用:
<a href="#" class="fa fa-trash-o fa-1g"></a>

注意: fa 是全局必须加入。

     fa-trash-0  是你需要的图标类(相当于名字)参考地址: http://fontawesome.io/icons/。

     fa-1g  控制大小用的 还有(fa-2x ,fa-3x,fa-4x,fa-5x)。

代码:

<!DOCTYPE html>
<html>
<head>
<title>font icons test</title>
<meta charset="ut-8" />
<link rel="stylesheet" type="text/css" href="font-awesome-4.0.3/css/font-awesome.css" />
<style type="text/css" >
.danger{
display: inline-block;
width: 80px;
height: 30px;
text-align: center;
background: brown;
border-radius: 5px;
font-size: 14px;
line-height: 30px;
text-decoration: none;
color: white;
}
</style>
</head>
<body>
<!--用法一-->
<a class="danger" href="#"><i class="fa fa-trash-o fa-lg"></i>Delete</a>
<!--用法二-->
<i class="fa fa-trash-o fa-2x"></i> Delete
<i class="fa fa-trash-o fa-3x"></i> Delete
<i class="fa fa-trash-o fa-4x"></i> Delete
<!--用法三-->
<a href="#" class="fa fa-trash-o fa-5x"></a>
</body>
</html>

来自:http://blog.csdn.net/lovoo/article/details/52819520

 
 

使用icon替换你的网页图标(转)的更多相关文章

  1. Captain Icon – 350+ 有趣的矢量图标免费下载

    Captain Icon 是一套一个惊人的免费图标集,包含350+有趣的矢量图标,可以缩放到任意大小而不会降低质量.图标的类别很丰富,有设计,体育,社会,天气等很多类别.提供 EPS.PSD.PNG. ...

  2. os项目icon和default 等相关图标命名规则和大小设置

    最新的参考apple官网地址:https://developer.apple.com/library/ios/qa/qa1686/_index.html,网页下面有详细的使用方法(ios7以后的) 转 ...

  3. 关于html5中的 网页图标问题

    在html5 中 设置网页图标的语句<link rel="icon" type="image/x-icon" href="favicon.ico ...

  4. 我的Android进阶之旅------>关于使用Android Studio替换App的launcher图标之后仍然显示默认的ic_launcher图标的解决方法

    前言 最近做了一个App,之前开发该App的时候一直以来都是默认的launcher图标启动的, 今天美工换了一个App的launcher 图标,因此在Android Studio中将默认的lanche ...

  5. 为你的网页图标(Favicon)添加炫丽的动画和图片

    Favico.js 在让你的网页图标显示徽章,图像或视频.你设置可以轻松地在网页图标中使用动画,可以自定义类型的动画,背景颜色和文字颜色.它支持的动画,像幻灯片,渐变,弹出等等. 您可能感兴趣的相关文 ...

  6. 使用Font Awesome替换你的网站图标

    http://fortawesome.github.io/Font-Awesome/whats-new/ 使用Font Awesome替换你的网站图标 ******************IE7BUG ...

  7. 替换应用程序exe图标,主要使用BeginUpdateResource,UpdateResource API函数

    替换应用程序exe图标,主要使用的API函数是BeginUpdateResource(),UpdateResource(),EndUpdateResource()来使用自定义的ico文件类替换exe程 ...

  8. Nodejs项目网页图标的处理

    今天,我要说的是Nodejs中,关于网页图标的处理. 在讲解怎么处理之前,我们的了解一下什么是网页图标.网页图标就是我们网页打开之后,标签页的图标,比如下面这个 前面的小人就是我们博客园的网页图标. ...

  9. 如何将网页的title前面的图标替换成自己的图标

    首先要准备自己的图标,图标必须是.ico格式的图片,网上有很多在线工具可以将自己的图片转换成ico格式的图片,这里给大家介绍两个网站 在线ico转换工具:生成的图标是可以选尺寸的,原图片的大小不限制 ...

随机推荐

  1. 2016年GitHub排名前20的Python机器学习开源项目(转)

    当今时代,开源是创新和技术快速发展的核心.本文来自 KDnuggets 的年度盘点,介绍了 2016 年排名前 20 的 Python 机器学习开源项目,在介绍的同时也会做一些有趣的分析以及谈一谈它们 ...

  2. 能在CAD2004以下版本里面打开2007以上版本文件的外挂

    下载地址:http://yunpan.cn/cjrxMKNubXQ5E  访问密码 1974 老何CAD工具安装办法:[推荐]先安装老何工具箱,然后用[扩展添加老何cad下拉菜单.bat]就完成老何下 ...

  3. mixamo fuse三维角色制作

    软件下载: http://www.cgtsj.com/cg/yj/1302/index.html 资源名称: Mixamo Fuse三维角色制作软件V1.3版 本站编号:  YJ1302 百度网盘:下 ...

  4. Spring表达式语言 之 5.3 SpEL语法(拾肆)

    5.3  SpEL语法 5.3.1  基本表达式 一.字面量表达式: SpEL支持的字面量包括:字符串.数字类型(int.long.float.double).布尔类型.null类型. 类型 示例 字 ...

  5. DispatcherServlet中使用的特殊的Bean

    DispatcherServlet默认使用WebApplicationContext作为上下文,因此我们来看一下该上下文中有哪些特殊的Bean: 1.Controller:处理器/页面控制器,做的是M ...

  6. 5.4.1 Selenium2启动空浏览器

    在Web自动化测试中,必须考虑不同浏览器对网站的兼容性测试,所以我们首先介绍如何用webDriver代码打开不同的浏览器. 本节介绍的是在Selenium2启动浏览器时,启动一个干净的没有任务插件及c ...

  7. 近期十大优秀jQuery插件推荐

    当有限的开发知识限制了设计进展,你无法为自己插上创新的翅膀时,jQuery可以扩展你的视野.本文将推荐从jQuery网站的Plugin频道中推选出的近期十款优秀jQuery插件. 1.jQuery U ...

  8. Source Insight 中使用 AStyle 代码格式工具

    Source Insight 中使用 AStyle 代码格式工具 彭会锋 2015-05-19 23:26:32     Source Insight是较好的代码阅读和编辑工具,不过source in ...

  9. Unity Invoke 方法

    Invoke() 方法是 Unity3D 的一种委托机制 如: Invoke("a", 5);   它的意思是:5 秒之后调用 a() 方法: 使用 Invoke() 方法需要注意 ...

  10. jq 中each的用法

    jQuery的each方法的几种常用的用法 each()方法能使DOM循环结构简洁,可遍历一维数组.多维数组.DOM, JSON 等等. var arr = [ "one", &q ...