其实有一些常见的图标使用字体图标比使用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的更多相关文章

  1. CSS3：不可思议的border属性&Web字体图标Font Awesome

     CSS3:不可思议的border属性 转载至——译文:不可思议的CSS border属性 原文:Magic of CSS border property Web字体图标Font Awesome 转载 ...

  2. 【27前端】字体图标 Font Face

    设计师做的高保真原型图,难免会用到艺术字体. 采用切片的方式,简单,粗暴,节省时间.除了retina屏其它兼容性也是一流.但是在修改的时候,会花很大的力气.即使只是修改文字大小,也需要重新切图,更别说 ...

  3. 字体图标Font Awesome 的使用

    下载地址:http://fontawesome.dashgame.com/ 将下载下来的压缩包解压,然后解压,将下载的整个文件夹复制到你的项目中,在你需要用字体图标的html中引入“font-awes ...

  4. Awesome图标 | 如何在某些编辑软件中使用Font Awesome字体图标

    文章目录 Font Awesome 字体图标 在某些编辑软件中使用 Font Awesome 字体图标 Font Awesome 为您提供可缩放矢量图标,它可以被定制大小.颜色.阴影以及任何可以用 C ...

  5. icon font字体图标字库汇总

    最近在研究icon font图标字库,找了一些比较好的在线字库.大都是开源的,而且各有特色! 阿里icon font字库 http://www.iconfont.cn/ 这个是阿里妈妈M2UX的一个i ...

  6. Font Awesome字体图标

    1.什么是字体图标字体图标是一个包含许多图标的字体库.可以理解为一种特殊的字体,只不过里面包含的都是图标. 2.Font Awesome图标字体库Font Awesome是目前最受欢迎最全面的图标字体 ...

  7. 字体图标 icon font

    Icon font icon font 指的是用字体文件代替图片文件,来展示图标.特殊字体等元素的方法. 应用场景: iconfont的优缺点 大小能够自由地变化 颜色能够自由地改动 加入阴影效果 * ...

  8. 字体图标 轻量级 Font Awesome

    今天呢,来推荐一款请轻量级 字体图标框架.Font Awesome 用法与bootstrap相似 打开网址.download下载,然后打开取到这两个,下载点这里,这个博客弄的挺好的. 找到exampl ...

  9. 字体图标库 IcoMoon IconFont Font Awesome的使用

    在项目开发的过程中,我们会经常用到一些图标.但是我们在使用这些图标时,往往会遇到失真的情况,而且图片数量很多的话,页面加载就越慢.所以,我们可以使用字体图标的方式来显示图标,字体图标任意放大缩小不会失 ...

  10. 字体图标三种格式区别（Unicode / Font class / Symbol）

    在实际项目中,或多或少会用到字体图标,优点是即减少了体积,又减少了http请求,可谓一举两得 我一般是在阿里巴巴矢量图库下载字体图标:http://www.iconfont.cn/   下面以阿里巴巴 ...

随机推荐

  1. HDFS的Web界面

  2. 时序数据库连载系列: 时序数据库一哥InfluxDB之存储机制解析

    InfluxDB 的存储机制解析 本文介绍了InfluxDB对于时序数据的存储/索引的设计.由于InfluxDB的集群版已在0.12版就不再开源,因此如无特殊说明,本文的介绍对象都是指 InfluxD ...

  3. TZ_02MyBatis_lazy SqlMapConfig.xml

    Mybatis的延迟加载又称为懒加载 mybatis在一对多的查询中,例如查询一个用户时需要查询这个用户下的所有账户信息,如果一次性的select * from user u left join ac ...

  4. 主流浏览器HTML5视频格式差异

    因最近在研究video.js,现在遇到的问题是在js中设置了swf,但是在ie8下只是显示黑屏并没有播放视频,在网上进行搜索时查到了有关各个浏览器支持哪些视频格式的文章,现在此记录下,方便以后查阅. ...

  5. 20190815-$N \Theta IP$

    $NOIP$ 请选择您想测试的难度: 「困难」 「困难的地狱」 「能被神犇切掉的」 「你做不出来的」 「简单(完成前面所有后解锁)」 要难死了-- 考试过程: 首先看看三道题: 这是NOIP模拟测试? ...

  6. shell总结：读取文件、参数、if、分割字符串、数组长度、空文件、变量赋值、多进程、按行切割文件、查看线程

    Reference: http://saiyaren.iteye.com/blog/1943207 1.     Shell  读取文件和写文件 for line in $(<top30000. ...

  7. java并发系列(三)-----ReentrantLock(重入锁)功能详解和应用演示

    1. ReentrantLock简介 jdk中独占锁的实现除了使用关键字synchronized外,还可以使用ReentrantLock.虽然在性能上ReentrantLock和synchronize ...

  8. OpenLayers修改要素

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. re模块元字符

    #元字符在re模块中有特殊意义的字符,有:^ $. * + {} [] () | \ ^$ #表示开头结尾,注意:[^]表示取反 . #点,表示任意一个字符,包括空格(一个空白字符),\t(换行符). ...

  10. Python3入门机器学习 经典算法与应用

    Python3入门机器学习 整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频的感受,单论单个知识点课程本身没问题,大家看的时候可以关注下 ...