icon 的各种做法

2020-11-25 本文已影响0人我是Msorry

1. <img>

.psd 设计稿
用Photoshop打开 .psd 设计稿文件，选中目标图层，右键选中 Duplicate Layer 复制图层，选择 Document:New 在新文件中打开图层，Image > Trim，Image > Canvas Size 设置画布大小，File > Export > Quick Export as PNG 导出为 .png
.png设计稿
用Photoshop打卡 .png 设计稿，选中一个icon，Image > Crop 剪切目标 icon，选择魔法棒 Magic Wand tool，按住 shift 选择 icon，右键选择 Select Inverse，delete 删除多余区域，deselect 取消选择，Image > Canvas Size 设置画布大小，File > Export > Quick Export as PNG 导出为 .png

<img src=".svg/.png" alt="">

优点：图片默认能够保持比例，只要不同时设置宽和高，能够自适应宽高

2. CSS background-image

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .icons > .icon {
      display:inline-block;
      width:100px;
      height:100px;
      background: red url(./xxx.png) no-repeat 0 0;
    }
    .icons > .icon.weibo{
      background-image:url(./icons/weibo.png)
    }
    .icons > .icon.qq{
      background-image:url(./icons/qq.png)
    }.icons > .icon.wechat{
      background-image:url(./icons/wechat.png)
    }
  </style>

</head>
<body> 
  <div class="icons">
    <div class="icon weibo"></div>
    <div class="icon qq"></div>
    <div class="icon wechat"></div>
  </div>
</body>
</html>

3. CSS Sprites

https://css.spritegen.com/
把一些图片整合到一张单独的图片中，从而减少你的网站的HTTP请求数量。该图片使用CSS background和background-position属性渲染同一张图片，只是展示的位置不一样

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .icon-weibo, .icon-qq, .icon-wechat{ display: inline-block; background: url('png.png') no-repeat; overflow: hidden; text-indent: -9999px; text-align: left; }
     
    .icon-weibo { background-position: -0px -0px; width: 261px; height: 200px; }
    .icon-qq { background-position: -0px -200px; width: 200px; height: 200px; }
    .icon-wechat { background-position: -0px -400px; width: 200px; height: 200px; }
  </style>

</head>

<body>
  <div class="icons">
    <div class="icon-weibo"></div>
    <div class="icon-qq"></div>
    <div class="icon-wechat"></div>
  </div>
</body>

</html>

4. iconfont

&#xe61x 这一字段是HTML实体，但是不表示任何字符，因此可以把这一字段的字符做成 icon 的样式

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
   @font-face {
  font-family: 'iconfont';  /* project id 2228739 */
  src: url('//at.alicdn.com/t/font_2228739_y0al4xoqfre.eot');
  src: url('//at.alicdn.com/t/font_2228739_y0al4xoqfre.eot?#iefix')   format('embedded-opentype'),
  url('//at.alicdn.com/t/font_2228739_y0al4xoqfre.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_2228739_y0al4xoqfre.woff') format('woff'),
  url('//at.alicdn.com/t/font_2228739_y0al4xoqfre.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_2228739_y0al4xoqfre.svg#iconfont') format('svg');
}
  </style>

</head>

<body>
   <div class="icons" style="font-family:iconfont">
    <div class="icon-weibo">&#xe618;</div>
    <div class="icon-qq">&#xe612;</div>
    <div class="icon-wechat">&#xe640;</div>
  </div>
</body>

</html>

CSS 伪元素中展示转义 icon 字符

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
   @font-face {
  font-family: 'iconfont';  /* project id 2228739 */
  src: url('//at.alicdn.com/t/font_2228739_y0al4xoqfre.eot');
  src: url('//at.alicdn.com/t/font_2228739_y0al4xoqfre.eot?#iefix')   format('embedded-opentype'),
  url('//at.alicdn.com/t/font_2228739_y0al4xoqfre.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_2228739_y0al4xoqfre.woff') format('woff'),
  url('//at.alicdn.com/t/font_2228739_y0al4xoqfre.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_2228739_y0al4xoqfre.svg#iconfont') format('svg');
}
    .icon-weibo::before{
      content:'\e618'
    }
    .icon-qq::before{
      content:"\e612"
    }
    .icon-wechat::before{
      content:"\e640"
    }
  </style>

</head>

<body>
   <div class="icons" style="font-family:iconfont">
    <div class="icon-weibo"></div>
    <div class="icon-qq"></div>
    <div class="icon-wechat"></div>
  </div>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
<link rel="stylesheet" href="//at.alicdn.com/t/font_2228739_y0al4xoqfre.css">

</head>

<body>
   <div class="icons" style="font-family:iconfont">
    <div class="icon-weibo"></div>
    <div class="icon-QQ"></div>
    <div class="icon-wechat"></div>
  </div>
</body>

</html>
>CSS 伪元素中展示转义 icon 字符

5. SVG 法

第一步：拷贝项目下面生成的symbol代码
第二步：加入通用css代码（引入一次就行）

<style type="text/css">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
</style>

第三步：挑选相应图标并获取类名，应用于页面

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style type="text/css">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
  </style>
  <style>
    .icon-food-strawberry{
      width:100px;height:100px;
    }
    .icon-zhawanzi{
      width:100px;height:100px;
    }
  </style>
  <script src="//at.alicdn.com/t/font_2228739_263z4pxhpd4.js"></script>
</head>

<body>
  <svg class="icon icon-food-strawberry" aria-hidden="true">
    <use xlink:href="#icon-food-strawberry"></use>
  </svg>
  <svg class="icon icon-zhawanzi" aria-hidden="true">
    <use xlink:href="#icon-zhawanzi"></use>
  </svg>

 </body>

</html>

6. CSS 法

https://cssicon.space/#/ 由纯css代码制成的图标集