字体图标font-awesome

其实有一些常见的图标使用字体图标比使用img来得好

Font Awesome 官网：http://fortawesome.github.io/Font-Awesome/

字体代码：http://fortawesome.github.io/Font-Awesome/icons/ (点击图标可见)

使用方法：

最简单的使用，下载压缩包，把font文件夹复制到项目文件夹下，font-awesome.min.css放到CSS文件该放的地方，然后在html代码中link就可以了。

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta name="description" content="">

    <meta name="author" content="">

    <title>font awesome</title>

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

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

    <link rel="stylesheet" type="text/css" href="css/my.css">

  </head>

  <body role="document">

        <div class="content">

          <div class="wrapper">

            <p>教育经历</p>

            <p>Education</p>

          </div>

          <div class="article">

            <h4 class="article-title">2012~2016</h4>

            <dl>

              <dd class="education-major">软件工程计算机应用方向（本科）</dd>

              <dd class="education-honor">2012 - 2013 学年度校一等奖学金</dd>

              <dd class="education-honor">2013 - 2014 学年度校二等奖学金</dd>

            </dl>

          </div>

  </body>

</html>

.wrapper::before {

  font-family: FontAwesome;

  font-size: inherit;

  text-rendering: auto;

  background-color: #333333;

  color: white;

  border-radius: 50px;

  float: left;

  width: 49px;

  height: 49px;

  text-align: center;

  line-height: 49px;

  font-size: 28px;

  content: "\f02d";

}

.article {

  border-left: solid;

  margin-top: -15px;

  margin-left: 25px;

  padding: 25px 25px 5px 25px ;

}

.article::after {

  font-family: FontAwesome;

  font-size: inherit;

  text-rendering: auto;

  background-color: #333333;

  color: #333333;

  border-radius: 50px;

  float: left;

  padding:;

  margin-left: -30px;

  margin-bottom: 45px;

  width: 9px;

  height: 9px;

  text-align: center;

  font-size: 5px;

  content: "";

}

.article-title::before {

  font-family: FontAwesome;

  font-size: inherit;

  text-rendering: auto;

  background-color: #20B2AA;

  color: white;

  border-radius: 50px;

  float: left;

  width: 36px;

  height: 36px;

  margin-top: -10px;

  margin-left: -5px;

  text-align: center;

  line-height: 36px;

  font-size: 20px;

  content: "\f061";

}

.article-title {

  /*overflow-x: hidden;*/

  background-color: #333333;

  border-radius: 6px;

  color: white;

  margin-left: -40px;

  margin-top: -5px;

  padding: 5px 0;

}

最后效果：

巴特西

字体图标font-awesome

最新文章

热门文章