http://www.thinkcmf.com/font/icons/

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

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

2： 解压后拷贝到你的项目中再引入到你的文件里面 如下：

1
<link rel="stylesheet" type="text/css" href="font-awesome-4.0.3/css/font-awesome.css" />

3： 开始使用：

1
<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）。

效果：

代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!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>

使用Font Awesome替换你的网站图标(icons 图标)的更多相关文章

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

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

  2. 怎样修改织梦网站的favicon图标

    现在很多的网站浏览器栏上都有favicon图标,比如百度,大家用织梦做好网站后,可能发现自己的网站favicon图标默认的不好看,如何修改织梦网站的favicon导航图标呢,很多人肯定有过困惑,小编遇 ...

  3. Swift - 异步加载各网站的favicon图标，并在单元格中显示

    下面是一个简单的应用,表格视图的各个单元格自动异步加载各个网站的favicon图标,并显示出来. 主要是复习下如何自定义单元格,单元格中图片的异步加载,以及didSet的用法. 效果图如下: 操作步骤 ...

  4. 网站简介-为什么网站的ICO图标更新后，ie浏览器没有更新过来？

    为什么网站的ICO图标更新后,ie浏览器没有更新过来? 如何更新本地ico图标? 收藏夹里的网址访问后网站ico小图标怎么不会更新,还是没图标的. 如果制作了一个新的favicon.ico图标,并且已 ...

  5. 上传网站后建议执行：chown www:www -R /path/to/dir 对网站目录进行权限设置，/path/to/dir替换为你网站目录。

    上传网站后建议执行:chown www:www -R /path/to/dir 对网站目录进行权限设置,/path/to/dir替换为你网站目录.

  6. 为网站设置icon图标用于显示在浏览器标签页最左侧

    icon图标,想必大家对它并不陌生吧,在浏览网页时会看到浏览器标签页的最左侧会有一个小图标,这个正是icon图标.本例为大家介绍下如何为网站设置这个图标 这句话起什么作用 ?复制代码 代码如下: &l ...

  7. 网站的favicon图标

    网站的favicon图标 favicon.ico一般用于作为缩略的网站标志,它显示在浏览器的地址栏或者标签上. 制作favicon图标 把图片转换为png图片 把png图片转换为ico图标,这需要借助 ...

  8. 仿站技术——获取和使用某些网站的iconfont图标字体

    前言: 很多前端新手在仿一些大型网站的时候经常遇到一个问题:该网站使用了图标字体——iconfont,虽然现在阿里有开源的iconfont库,但是还是没有原网站的效果(本人强迫症但非处女座).所以此文 ...

  9. Vue. 之 替换 左上角 title标签处的图标

    Vue. 之 替换 左上角 title标签处的图标 1.icon命名为favicon.ico放在项目的位置:src/assets/favicon.ico 2.在index.html中写入: <l ...

随机推荐

  1. php 非常简单的导入sql文件

    在网上找了很多,都是写了一个类 做了各种处理.还真是累哦 当然之前也做了各种尝试 source 客户端命令 mysql_query()是不支持的 load_file  在where 之后执行可以,但是 ...

  2. Windows下永久解决数据库乱码 utf8 转 gbk

    产生乱码原因 因为windows终端的默认字符集是gbk编码,而mysql数据库是utf8的编码,所以会产生乱码问题 解决乱码问题(临时修改) 询当前数据库默认编码: mysql> show v ...

  3. 汽车收费 C++ PTA

    7-1 汽车收费(10 分) 现在要开发一个系统,管理对多种汽车的收费工作. 给出下面的一个基类框架 class Vehicle { protected: string NO;//编号 public: ...

  4. 学习笔记之Cloud computing

    Cloud computing - Wikipedia https://en.wikipedia.org/wiki/Cloud_computing

  5. API网关Kong系列（三）添加服务

    进入之前部署好的kong-ui,默认第一次登陆需要配置kong服务的地址 进入API菜单,点击+号 按照要求填入相关信息 至此完成,可以使用诸如 https://your.domain.com:208 ...

  6. Ubuntu14.04下hadoop-2.6.0单机配置和伪分布式配置

    需要重新编译的教程:http://blog.csdn.net/ggz631047367/article/details/42460589 在Ubuntu下创建hadoop用户组和用户 hadoop的管 ...

  7. Impala源码分析

    问题导读:1.Scheduler任务中Distributed Plan.Scan Range是什么?2.Scheduler基本接口有哪些?3.QuerySchedule这个类如何理解?4.Simple ...

  8. C# webbrowser实现百度知道团队邀请助手!

    [百度知道团队邀请助手] 是您快速提高百度知道团队成员数和团队排名的利器! 主要功能: 1.运用C#自带的webbrowser自动登录百度: 2.自动采集请在C#.Net分类排名下的所有用户,邀请这些 ...

  9. RAC 11.2的新特性

    网格即插即用(GPnP) 网格即插即用帮助管理员来维护集群,以前增加或删除节点需要的一些手动操作的步骤现在可以由GPnP来自动实现. GPnP不是一个单独的概念,它依赖于以下特性:在一个XML配置文件 ...

  10. linux开机启动详细流程图

    linux开机启动详细流程图: 一.BIOS 加电自检当你按电源开关开机时,电脑会首先去启动BIOS(基本输入输出系统),BIOS一般是集成在主板上的.BIOS 的工作1.检测连接硬件,比如显卡,内存 ...