【FontAwesome】入门小案例

FontAwesome是一款可以和bootstrap框架进行搭配的图标集，提供大量漂亮的图标和字体

接下来我们就来学习一下如何入门:

1.进入官网下载文件：http://fontawesome.io/#modal-download

2.将下载的文件解压拷贝到你的项目中:

【FontAwesome】入门小案例

3.写好静态文件并引入fontawesome的样式

[html]view
plain copy
 print?

<link rel="stylesheet" href="fontawesome/css/font-awesome.min.css">  

<link rel="stylesheet" href="fontawesome/css/font-awesome.css">  

4.到官方找寻需要的图标，在页面中进行相应的配置

【FontAwesome】入门小案例

接下来我们来配置一下

[html]view
plain copy
 print?

<!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>

运行结果如下:

【FontAwesome】入门小案例

原文地址：http://blog.****.net/Evan_QB/article/details/78813861

【FontAwesome】入门小案例

相关推荐