使用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 ...

随机推荐

解决Qt Creator编译输出窗口乱码的问题
设置环境变量LC_ALL为en_US. 附注:将乱码复制到文本编辑器(如Notepad++)后将编码设置为utf-8,可以看到正确的文字. 看样子是编译输出窗口的编码设置出了问题,或者是gcc的输出编 ...
windows下Nginx反向代理服务器安装与配置
感谢慕课网Geely老师的讲解,本人将Nginx进行如下的总结. Nginx是一款轻量级的Web服务器,也是一款反向代理服务器,其主要特点:高稳定, 高性能,资源占用少功能丰富,模块化结构支持热部署 ...
如何随机从数据库表中抽一条数据的SQL语句
NewID() 方法返回一个 GUID,如:EE95A489-B721-4E8A-8171-3CA8CB6AD9E4 在 select 表的时候,再增加一列为 NewID() 就可以了. SQL 语句 ...
DIV+CSS如何让文字垂直居中?（转）
此篇文章转自网络,但是我忘了原文地址,如果有人知道,麻烦告知一声~ 在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少 ...
[UE4]多播代理实例
.h DECLARE_DYNAMIC_MULTICAST_DELEGATE_OneParam(FLoginErrorEvent, FString, ErrorMessage); UPROPERTY(B ...
MySQL数据库储存引擎Inoodb一--记录储存结构
在开文我先说明一下,接下来的数据库知识文章都是在微信公众号“我们都是小青蛙”学习然后在通过自己的理解进行书写的.有兴趣的朋友可以去关注这个微信公众号.话不多说,我们在日常使用数据库进行数据持久化的时 ...
Django中组合搜索功能
需求分析很多电商网站中有组合搜索的功能,所谓组合搜索就是网页中组合多个条件,对数据库中进行查询,并且将结果显示在页面中,看个例子吧: 注意红框中的标识,我们可以根据URL来做组合搜索. video- ...
ajax控制页面跳转
一开始我是这么写的,一直报错,跳转路径解析不了,显示为问号: 前台html: <form> <table style="margin: 200px auto;"& ...
Flask上下文管理源码分析
上下文管理本质(类似于threading.local): 1.每一个线程都会在Local类中创建一条数据: { "唯一标识":{stark:[ctx,]}, "唯一标识& ...
掩膜操作手写+API（第二天）
1.1首先是用到的理论知识: 上面是一个通用的公式,光知道上面写程序还是有点麻烦的,下面公式画的有点丑,可以表达我的观点. 1.2用到的知识点:可以边看程序边看用到的知识点: CV_Assert(); ...

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

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

随机推荐

热门专题