使用Font Awesome替换你的网站图标(icons 图标)

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

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

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

效果：

代码：

<!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 图标)的更多相关文章

使用Font Awesome替换你的网站图标
http://fortawesome.github.io/Font-Awesome/whats-new/ 使用Font Awesome替换你的网站图标 ******************IE7BUG ...
怎样修改织梦网站的favicon图标
现在很多的网站浏览器栏上都有favicon图标,比如百度,大家用织梦做好网站后,可能发现自己的网站favicon图标默认的不好看,如何修改织梦网站的favicon导航图标呢,很多人肯定有过困惑,小编遇 ...
Swift - 异步加载各网站的favicon图标，并在单元格中显示
下面是一个简单的应用,表格视图的各个单元格自动异步加载各个网站的favicon图标,并显示出来. 主要是复习下如何自定义单元格,单元格中图片的异步加载,以及didSet的用法. 效果图如下: 操作步骤 ...
网站简介-为什么网站的ICO图标更新后，ie浏览器没有更新过来？
为什么网站的ICO图标更新后,ie浏览器没有更新过来? 如何更新本地ico图标? 收藏夹里的网址访问后网站ico小图标怎么不会更新,还是没图标的. 如果制作了一个新的favicon.ico图标,并且已 ...
上传网站后建议执行：chown www:www -R /path/to/dir 对网站目录进行权限设置，/path/to/dir替换为你网站目录。
上传网站后建议执行:chown www:www -R /path/to/dir 对网站目录进行权限设置,/path/to/dir替换为你网站目录.
为网站设置icon图标用于显示在浏览器标签页最左侧
icon图标,想必大家对它并不陌生吧,在浏览网页时会看到浏览器标签页的最左侧会有一个小图标,这个正是icon图标.本例为大家介绍下如何为网站设置这个图标这句话起什么作用 ?复制代码代码如下: &l ...
网站的favicon图标
网站的favicon图标 favicon.ico一般用于作为缩略的网站标志,它显示在浏览器的地址栏或者标签上. 制作favicon图标把图片转换为png图片把png图片转换为ico图标,这需要借助 ...
仿站技术——获取和使用某些网站的iconfont图标字体
前言: 很多前端新手在仿一些大型网站的时候经常遇到一个问题:该网站使用了图标字体——iconfont,虽然现在阿里有开源的iconfont库,但是还是没有原网站的效果(本人强迫症但非处女座).所以此文 ...
Vue. 之替换左上角 title标签处的图标
Vue. 之替换左上角 title标签处的图标 1.icon命名为favicon.ico放在项目的位置:src/assets/favicon.ico 2.在index.html中写入: <l ...

随机推荐

java日期格式转换工具类
原文地址:http://blog.csdn.net/zhiweianran/article/details/7991531 package com.ace.backoffice.utils; impo ...
Redis内存数据库操作命令详解
一.连接操作相关的命令 quit:关闭连接(connection) auth:简单密码认证二.对value操作的命令 exists(key):确认一个key是否存在 ...
C/C++基础----变量和基本类型
变量和基本类型不同平台下基本类型的字节数类型 16位平台 32位平台 64位平台 char 1 1 1 short 2 2 2 int 2 4 4 long 4 4 8 long long / 8 ...
java 解析pdm文档
前面展示了pdm 的xml结构,既然知道了结构,用java来解析也不会太难,这就为代码自动生成奠定了基础 package com.core.reader.pdmreader.imp; import j ...
本地ip 和网络ip 解释
本地IP其实就是私有IP地址10.0.0.0--10.255.255.255172.16.0.0----172.31.255.255192.168.0.0---192.168.255.255 这些都是 ...
求两点之间距离 C++
求两点之间距离(20 分) 定义一个Point类,有两个数据成员:x和y, 分别代表x坐标和y坐标,并有若干成员函数. 定义一个函数Distance(), 用于求两点之间的距离.输入格式: 输入有两行 ...
R语言学习——欧拉计划（3）Largest prime factor 求最大质因数
The prime factors of 13195 are 5, 7, 13 and 29. What is the largest prime factor of the number 60085 ...
关于String.valueOf()和.toString的问题
以下是String.valueOf()的源代码 public static String valueOf(Object obj) { return (obj == null) ? " ...
廖雪峰Java1-2Java程序基础-2变量和数据类型
1.变量变量是可以持有某个基本类型的数值,或者指向某个对象. 变量必须先定义后使用定义: 变量类型变量名 = 初始值; 2.java基本数据类型整数类型:long int short byte ...
利用百度翻译API，获取翻译结果
利用百度翻译API,获取翻译结果 translate.py #!/usr/bin/python #-*- coding:utf-8 -*- import sys reload(sys) sys.set ...

使用Font Awesome替换你的网站图标(icons 图标)

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

随机推荐

热门专题