FontAwesome是一款可以和bootstrap框架进行搭配的图标集,提供大量漂亮的图标和字体
接下来我们就来学习一下如何入门:
1.进入官网下载文件:http://fontawesome.io/#modal-download
2.将下载的文件解压拷贝到你的项目中:
3.写好静态文件并引入fontawesome的样式
< link rel = "stylesheet" href = "fontawesome/css/font-awesome.min.css" > < link rel = "stylesheet" href = "fontawesome/css/font-awesome.css" >
4.到官方找寻需要的图标,在页面中进行相应的配置
接下来我们来配置一下
<!DOCTYPE html > < html > < head > < meta charset = "UTF-8" > < title > FontAwesome学习 </ title > < link rel = "stylesheet" href = "fontawesome/css/font-awesome.min.css" > < link rel = "stylesheet" href = "fontawesome/css/font-awesome.css" > < style type = "text/css" > i{ text-indent: 2em; } </ style > </ head > < body > < span class = "fa fa-address-book" > 联系人 </ span > < br /> < i class = "fa fa-address-book-o" aria-hiien = "true" > evan_qb </ i > < br /> < i class = "fa fa-address-book-o" aria-hiien = "true" > evan_qc </ i > < br /> < i class = "fa fa-address-book-o" aria-hiien = "true" > evan_qd </ i > < br /> < i class = "fa fa-address-book-o" aria-hiien = "true" > evan_qe </ i > < br /> < i class = "fa fa-address-book-o" aria-hiien = "true" > evan_qf </ i > < br /> < i class = "fa fa-address-book-o" aria-hiien = "true" > evan_qg </ i > < br /> < i class = "fa fa-address-book-o" aria-hiien = "true" > evan_qh </ i > < br /> < i class = "fa fa-address-book-o" aria-hiien = "true" > evan_qi </ i > < br /> < i class = "fa fa-address-book-o" aria-hiien = "true" > evan_qj </ i > < br /> < i class = "fa fa-address-book-o" aria-hiien = "true" > evan_qk </ i > < br /> < i class = "fa fa-address-book-o" aria-hiien = "true" > evan_ql </ i > < br /> < i class = "fa fa-address-book-o" aria-hiien = "true" > evan_qm </ i > < br /> < i class = "fa fa-address-book-o" aria-hiien = "true" > evan_qn </ i > < br /> < i class = "fa fa-address-book-o" aria-hiien = "true" > evan_qo </ i > < br /> < i class = "fa fa-address-book-o" aria-hiien = "true" > evan_qp </ i > < br /> </ body > </ html >
运行结果如下:
原文地址:http://blog.csdn.net/Evan_QB/article/details/78813861