第一次使用 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. hiho_1066_并查集

    题目大意 给出N个操作,每个操作可能为两种类型之一: 1. 认定两个人属于同一个组织 2. 查询两个人是否是同一个组织 要求对于每个操作类型2,给出结果,即查询的两个人是否属于同一个组织.其中,任何人 ...

  2. dedecms5.7怎么取消邮箱验证以及dedecms 会员发布的文章不需要审核的解决方法

    后台 ——系统基本参数——会员设置——会员权限开通状态——改为0 1.实现会员发布文章不需要审核,非会员发布需要审核 在member这个文件夹下找到archives_sg_add.php这个文件,打开 ...

  3. Working with Data » Getting started with ASP.NET Core and Entity Framework Core using Visual Studio » 增、查、改、删操作

    Create, Read, Update, and Delete operations¶ 5 of 5 people found this helpful By Tom Dykstra The Con ...

  4. apt-get remove, apt-get autoremove和aptitude remove的区别

    这篇文章的图片链接发生了问题,无法正常查看图片,所以我在CSDN转载一下,特此声明. apt-getremove的行为我们很好理解,就是删除某个包的同时,删除依赖于它的包,例如:A依赖于B, B依赖于 ...

  5. linux笔记：用户管理命令和用户组管理命令

    用户管理命令 命令名称:useradd功能:添加用户(添加完后不能立即使用,必须用passwd修改用户密码后才能使用)用法:useradd [选项] 用户名选项参数:-u 手工指定用户的UID-d 手 ...

  6. selenium+python笔记9

    #!/usr/bin/env python # -*- coding: utf-8 -*- """ @desc: delete mail 我们多添加一些测试场景,比如:删 ...

  7. php使用位与运算符【&】位或运算符【|】实现权限管理

    权限值是这样的2^0=1,相应2进数为”0001″(在这里^我表示成”次方”,即:2的0次方,下同)2^1=2,相应2进数为”0010″2^2=4,相应2进数为”0100″2^3=8,相应2进数为”1 ...

  8. poj2676 Sudoku（DFS）

    做了很久还是参考了别人的答案orz,其实也不难啊.我要开始学一下怎么写搜索了... 题目链接:poj2676 Sudoku 题解:暴力搜索,DFS每个空白格子所放数字. #include<cst ...

  9. Hadoop 添加删除数据节点（datanode）

    前提条件: 添加机器安装jdk等,最好把环境都搞成一样,示例可做相应改动 实现目的: 在hadoop集群中添加一个新增数据节点. 1. 创建目录和用户  mkdir -p /app/hadoop gr ...

  10. uva 1220

    1220 - Party at Hali-Bula Time limit: 3.000 seconds Dear Contestant, I'm going to have a party at my ...