icon 的各种做法

Author Avatar
Nico Zhang 1月 11, 2018
  • 在其它设备中阅读本文章

img法

可以自适应宽高,图片会默认保持比例。只需设置一下width或者height就能等比改变图标大小。不能同时设置图标宽高,如果同时设置,图标会变形。


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .icons>img{
      margin:0 25px;
      width:50px
    }
  </style>
</head>
<body>
  <div class="icons" style="text-align:center;">
    <img src="./qq.png" alt="QQ">
    <img src="./weibo.png" alt="微博">
    <img src="./weixin.png" alt="微信">
  </div>
</body>
</html>

background法

图标不会因为改变div的宽、高改变而变形,但是图标可能不居中。


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .icons>.icon{
      margin:5px 25px;
      display: inline-block;
      width:100px;
      height:100px;
      border:1px solid red;
      background:#ccc url(./qq.png) no-repeat 0 0;      /* no-repeat,图片不重复 */
    }
    .icons>.icon.qq{
      background-image:url(./qq.png)      
    }
    .icons>.icon.weibo{
      background-image:url(./weibo.png)      
    }
    .icons>.icon.weixin{
      background-image:url(./weixin.png)      
    }
  </style>
</head>
<body>
  <div class="icons" style="text-align:center;">
    <div class="icon qq"></div>
    <div class="icon weibo"></div>
    <div class="icon weixin"></div>
  </div>
</body>
</html>

css image sprites

background 合一法——精灵图(雪碧图)

css sprites generator:

  1. http://css.spritegen.com/
  2. https://www.toptal.com/developers/css/sprite-generator

iconfont-HTML形式

方法:http://www.iconfont.cn


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
   @font-face {
    font-family: 'iconfont';  /* project id 538915 */
    src: url('//at.alicdn.com/t/font_538915_q4dnam3g7xkr19k9.eot');
    src: url('//at.alicdn.com/t/font_538915_q4dnam3g7xkr19k9.eot?#iefix')           format('embedded-opentype'),
    url('//at.alicdn.com/t/font_538915_q4dnam3g7xkr19k9.woff') format('woff'),
    url('//at.alicdn.com/t/font_538915_q4dnam3g7xkr19k9.ttf') format('truetype'),
    url('//at.alicdn.com/t/font_538915_q4dnam3g7xkr19k9.svg#iconfont')             format('svg');
}    
    /* 下面为iconfont-css方法 */
    .icons{
       font-size:35px;
    }
    .icons::before{
      content:'\e627\e601\e674\e67f'
    }
  </style>
</head>
<body>
  <div style="font-family:iconfont">
    <div style="font-size:35px">&#xe627;&#xe601;&#xe674;&#xe67f;</div>    <!-- iconfont-html -->
    <div class="icons"></div>    <!-- 此处为iconfont-css -->
  </div>
</body>
</html>

icon-font-1

icon-font-2

iconfont-css形式


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <link rel="stylesheet" href="//at.alicdn.com/t/font_538915_q4dnam3g7xkr19k9.css">
</head>
<body>
  <span class="iconfont icon-qq"></span>
  <span class="iconfont icon-github"></span>
  <span class="iconfont icon-weibo"></span>
  <span class="iconfont icon-weixin"></span>
</body>
</html>

icon-font-3

SVG icon(推荐)


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script src="//at.alicdn.com/t/font_538915_q4dnam3g7xkr19k9.js"></script>
  <style type="text/css">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
</style>
</head>
<body>
  <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-qq"></use>
</svg>
  <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-github"></use>
</svg>
  <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-weibo"></use>
</svg>
  <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-weixin"></use>
</svg>
</body>
</html>

enter description here

使用帮助