使用icon替换你的网页图标(转)
第一次使用 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替换你的网页图标(转)的更多相关文章
- Captain Icon – 350+ 有趣的矢量图标免费下载
Captain Icon 是一套一个惊人的免费图标集,包含350+有趣的矢量图标,可以缩放到任意大小而不会降低质量.图标的类别很丰富,有设计,体育,社会,天气等很多类别.提供 EPS.PSD.PNG. ...
- os项目icon和default 等相关图标命名规则和大小设置
最新的参考apple官网地址:https://developer.apple.com/library/ios/qa/qa1686/_index.html,网页下面有详细的使用方法(ios7以后的) 转 ...
- 关于html5中的 网页图标问题
在html5 中 设置网页图标的语句<link rel="icon" type="image/x-icon" href="favicon.ico ...
- 我的Android进阶之旅------>关于使用Android Studio替换App的launcher图标之后仍然显示默认的ic_launcher图标的解决方法
前言 最近做了一个App,之前开发该App的时候一直以来都是默认的launcher图标启动的, 今天美工换了一个App的launcher 图标,因此在Android Studio中将默认的lanche ...
- 为你的网页图标(Favicon)添加炫丽的动画和图片
Favico.js 在让你的网页图标显示徽章,图像或视频.你设置可以轻松地在网页图标中使用动画,可以自定义类型的动画,背景颜色和文字颜色.它支持的动画,像幻灯片,渐变,弹出等等. 您可能感兴趣的相关文 ...
- 使用Font Awesome替换你的网站图标
http://fortawesome.github.io/Font-Awesome/whats-new/ 使用Font Awesome替换你的网站图标 ******************IE7BUG ...
- 替换应用程序exe图标,主要使用BeginUpdateResource,UpdateResource API函数
替换应用程序exe图标,主要使用的API函数是BeginUpdateResource(),UpdateResource(),EndUpdateResource()来使用自定义的ico文件类替换exe程 ...
- Nodejs项目网页图标的处理
今天,我要说的是Nodejs中,关于网页图标的处理. 在讲解怎么处理之前,我们的了解一下什么是网页图标.网页图标就是我们网页打开之后,标签页的图标,比如下面这个 前面的小人就是我们博客园的网页图标. ...
- 如何将网页的title前面的图标替换成自己的图标
首先要准备自己的图标,图标必须是.ico格式的图片,网上有很多在线工具可以将自己的图片转换成ico格式的图片,这里给大家介绍两个网站 在线ico转换工具:生成的图标是可以选尺寸的,原图片的大小不限制 ...
随机推荐
- 2016年GitHub排名前20的Python机器学习开源项目(转)
当今时代,开源是创新和技术快速发展的核心.本文来自 KDnuggets 的年度盘点,介绍了 2016 年排名前 20 的 Python 机器学习开源项目,在介绍的同时也会做一些有趣的分析以及谈一谈它们 ...
- 能在CAD2004以下版本里面打开2007以上版本文件的外挂
下载地址:http://yunpan.cn/cjrxMKNubXQ5E 访问密码 1974 老何CAD工具安装办法:[推荐]先安装老何工具箱,然后用[扩展添加老何cad下拉菜单.bat]就完成老何下 ...
- mixamo fuse三维角色制作
软件下载: http://www.cgtsj.com/cg/yj/1302/index.html 资源名称: Mixamo Fuse三维角色制作软件V1.3版 本站编号: YJ1302 百度网盘:下 ...
- Spring表达式语言 之 5.3 SpEL语法(拾肆)
5.3 SpEL语法 5.3.1 基本表达式 一.字面量表达式: SpEL支持的字面量包括:字符串.数字类型(int.long.float.double).布尔类型.null类型. 类型 示例 字 ...
- DispatcherServlet中使用的特殊的Bean
DispatcherServlet默认使用WebApplicationContext作为上下文,因此我们来看一下该上下文中有哪些特殊的Bean: 1.Controller:处理器/页面控制器,做的是M ...
- 5.4.1 Selenium2启动空浏览器
在Web自动化测试中,必须考虑不同浏览器对网站的兼容性测试,所以我们首先介绍如何用webDriver代码打开不同的浏览器. 本节介绍的是在Selenium2启动浏览器时,启动一个干净的没有任务插件及c ...
- 近期十大优秀jQuery插件推荐
当有限的开发知识限制了设计进展,你无法为自己插上创新的翅膀时,jQuery可以扩展你的视野.本文将推荐从jQuery网站的Plugin频道中推选出的近期十款优秀jQuery插件. 1.jQuery U ...
- Source Insight 中使用 AStyle 代码格式工具
Source Insight 中使用 AStyle 代码格式工具 彭会锋 2015-05-19 23:26:32 Source Insight是较好的代码阅读和编辑工具,不过source in ...
- Unity Invoke 方法
Invoke() 方法是 Unity3D 的一种委托机制 如: Invoke("a", 5); 它的意思是:5 秒之后调用 a() 方法: 使用 Invoke() 方法需要注意 ...
- jq 中each的用法
jQuery的each方法的几种常用的用法 each()方法能使DOM循环结构简洁,可遍历一维数组.多维数组.DOM, JSON 等等. var arr = [ "one", &q ...