[teemo][20161127][font-awesome]使用font-awesome快速在自己的网站引入漂亮的图标

使用font-awesome快速在自己的网站引入漂亮的图标

css免费开源大量图标的超简单引用

1、引入国内font cdn的css样式表

从里面找到一个比较新的版本http://www.bootcdn.cn/font-awesome/

目前最新版本样式表地址http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css

<link rel="stylesheet" href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css"/>

2、font-awesome网站查找合适的图标

font-awesome网址http://fontawesome.io/

下面有搜索框可以查找图标

点进去，找到<i>标签

<i class="fa fa-envelope-open-o" aria-hidden="true"></i>

3、拷贝到页面就可以使用

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <link rel="stylesheet" href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css"/>
 7 </head>
 8 <body>
 9 <i class="fa fa-envelope-open-o" aria-hidden="true"></i>
10 </body>
11 </html>
效果如下：
更多实用方法，参考font-awesome里面的example，可以使用更多不同size的图标，更多样式的图标等等，等着各位自行发掘；
posted @ 2016-11-28 16:17  张庭岑  阅读(284)  评论(0)    收藏  举报