何为Font-Awesome
Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.
简言之:可伸缩的图标(矢量化),高度自定义(大小,颜色,阴影等)
优势
- 目前图标总数共有519个;
- 不依赖Javascript
- 矢量图形,无限缩放
- 免费,可用于商业
- CSS控制样式,自定义图标颜色,大小,阴影,一切可能实现的效果
- 支持retina显示(苹果retina 屏幕)
- 源于BS框架(最初的目标设计使用方向),现在基本支持主流的框架
- 兼容屏幕阅读器
- 图标用到的animation适用于IE8~9
缺点
- 不兼容IE7(不过现在用户使用主流浏览器都慢慢过渡到较新的..所以也不算奇葩)
获取Font-Awesome
使用方法
本地使用
下载完毕[font-awesome-4.3.0.zip]解压文件包括以下几个文件夹:
- CSS — 字体的引入,图标基础样式,大小等
- fonts — CSS需要引用字体文件夹,本地用户需要安装内部的
fontawesome-webfont.ttf(CSS引入字体) - less — 各种参数自定义的less文件,用来自定义Font awesome
- sass — 各种参数自定义的sass文件,用来自定义Font awesome
SASS和LESS都是CSS预处理器
把CSS文件夹和fonts复制到网站根目录(记得安装字体)即可使用,具体看代码示例
代码内含注释—应该很好理解
建议:用Chrome F12调试,一边查看注释一边折腾更妙
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Font-Awesome完整教程</title>
<link rel="stylesheet" href="css/font-awesome.min.css">
<!--生产环境建议用压缩版本,非压缩版本建议学习使用 -->
<style>
* {
outline: 0px;
border: 0px;
margin: 0px;
padding: 0px;
}
div {
border: 2px solid #882BEF;
margin: 30px;
500px;
height: auto;
}
ul {
list-style: none;
}
div {
border: 2px solid #882BEF;
margin: 30px;
500px;
height: auto;
}
.extraHeight {
height: 400px;
}
.extraHeight ul li {
margin: 10px auto;
}
<!--啊咧,这上面所有样式只是让效果显示排版一下而增加的-->
</style>
</head>
<body>
<div class="icon-test-list">
<h1>图标基础样式</h1>
<ul>
<li><i class="fa fa-weixin"></i>微信</li>
<li><i class="fa fa-whatsapp"></i>whatsapp</li>
<li><i class="fa fa-youtube"></i>youtube</li>
<li><i class="fa fa-weibo"></i>新浪微博</li>
</ul>
</div>
<div class="icon-test-list">
<h1>图标规格样式</h1>
<span></span>
<ul>
<li><i class="fa fa-weixin "></i>微信</li>
<li><i class="fa fa-weixin fa-lg"></i>微信lg</li>
<li><i class="fa fa-weixin fa-2x"></i>微信</li>
<li><i class="fa fa-weixin fa-3x"></i>微信3x</li>
<li><i class="fa fa-weixin fa-4x"></i>信4x</li>
<li><i class="fa fa-weixin fa-5x"></i>微信5x</li>
</ul>
</div>