使用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转换工具:生成的图标是可以选尺寸的,原图片的大小不限制 ...
随机推荐
- Gevent的长轮询实现方法详解
长轮询 1.浏览网页时,浏览器会传HTTP 请求到服务器,服务器会根据请求将网页的内容传给浏览器,但是在很多的情况下,使用者会需要看到最新的即时性资讯,例如观看股票市场行情,而在以前只能靠着重新载入网 ...
- C\C++头文件说明
C\C++编程时候经常会遇到头文件问题而出现一系列的调试错误,下面我就简要的举例介绍一下头文件的作用,我们知道一个C\C++ 程序中开头一般都为: #include<iostream.h> ...
- WEB网页插件 如何实现 选择上传图片路径 【高级问题】
发表于 2010-10-22 12:11 | |只看楼主 按键精灵程序里面的WEB网页插件 如何实现 选择上传图片路径 我想在上传图片的选框设置图片路径为 C:\fakepath\001. ...
- mysql5.7主从复制
1.简介 1.1主从复制 是指建立一个和主数据库完全一样的数据库环境,称为从数据库:主数据库一般是实时的业务数据库,从数据库的作用和使用场合一般有几个: 一是作为后备数据库,主数据库服务器故障后,可切 ...
- 本地化Model Factory
即让其生成中文的测试数据 先简单介绍Model Factory两个常用方法: 进入tinker页面生成测试数据: Factory(User::class,10)->make():make()方法 ...
- 20145218 《Java程序设计》第9周学习总结
20145218 <Java程序设计>第9周学习总结 教材学习内容总结 16.1.1 JDBC简介 JDBC全名Java DataBase Connectivity,是java联机数据库的 ...
- Spring事务的传播特性和隔离级别
事务的几种传播特性1. PROPAGATION_REQUIRED: 如果存在一个事务,则支持当前事务.如果没有事务则开启2. PROPAGATION_SUPPORTS: 如果存在一个事务,支持当前事务 ...
- java多线程的常用方法(以及注意事项)
/* * 线程的常用方法 * 1.start(); * 2.run(); * 3.sleep(int millsecond); * 4.isAlive(); -->判断线程是否还在运行 * 5. ...
- uva----11729 Commando war (突击战争)
G Commando War Input: Standard Input Output: Standard Output “Waiting for orders we held in the wood ...
- 细谈HTML5
回顾过了html接下来我们就来看看HTML5吧! HTML5手机应用的最大优势就是可以在网页上直接调试和修改.原先应用的开发人员可能需要花费非常大的力气才能达到HTML5的效果,不断地重复编码.调试和 ...