前端泥瓦匠

Appearance

Return to top
On this page

icon 全解析

格式

图片格式

  • 位图图片：bmp、 jpg、 gif、 png
  • 矢量图图片：以 svg 格式为代表，可缩放矢量图形 (Scalable VectorGraphics), svg 是 - - 种使用 XML 格式定义的图像；

图标格式

  • 图标采用图片格式，有 bmp，jpg， gif, png 等文件格式；
  • 缺点：大小改变后，可能会出现锯齿效果，影响美观；

字体图标

  • 图标都采用字体的格式；
  • 可以使用 color, font-size 等改变图标颜色，大小等的一些样式属性；

img 及 HTML area 技术

  • <area>标签定义图像映射中的区域（注：图像映射指得是带有可点击区域的图像）
  • area 元素总是嵌套在<map> 标签中。
  • <img>标签中的 usemap 属性与 map 元素 name 属性相关联，创建图像与映射之间的联系。所有主流浏览器都支<area>标签
  • 一款在线工具 Image-Maps:

  1. map 在浏览器的兼容性相对来说是比较好的，这是我在项目中的一个处理方法 推荐到下面网站去画 map http://imagemap-generator.dariodomi.de/http://www.image-maps.com/

  2. 画完去 github 上拉一下代码 https://github.com/stowball/jQuery-rwdImageMaps

    这个库非常好用，支持自适应。注意图片的大小设置与画第一点画 map 的大小保持一致。

html
<img src="planets.jpg" border="e" usemap=" #planetmap" alt="Planets" />
<map name="planetmap" id="planetmap">
    <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
    <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
    <area shape="rect" coords="e,e,11e,260" href ="sun.html" alt="Sun" />
</map>
1
2
3
4
5
6
html
<div class='meta-links'>
    <div class="meta-link">
        <div class=" icon" style="background-image: url('/cn/assets/themes/moby/img/icon-wechat.png')" ></div>
    <div class= "text"></div>
</div>
1
2
3
4
5
css
.meta-links .meta-link .icon {
    width: 50px;
    height: 50px;
    margin-right: 10px;
    background-repeat: no-repeat ;
    background-position: center center;
    background-size: contain;
}
1
2
3
4
5
6
7
8

icon-sprites

  • 该技术的全称是：CSS Sprite， 又称 css 雪碧图（或精灵图） ; 是网页中图片的一种处理方式；
  • 原理：即将网页中所应用的比较小的图片合并为一个大的图片，然后用设置背景图的位置来显示图片；
  • 优点：减少 http 请求次数，使页面的加载速度更快，提高了网页的性能；
  • 缺点：需要先设置标签背景图片，再通过精灵图中小图标的宽高和位置，设置对应的 div 宽高和背景定位坐标；
图片实现

图标左，上角原点到雪碧图的左，上角 0，0 坐标点的 x 轴和 y 轴的值；就是 background-position 坐标点、的值（取负值）
html
<li class="item search button-rotate" data-text= "捜索">
    <a href="javascript:void(0);" id="search-btn">搜索</a>
</li>
1
2
3
css
.mod-sidebar .search{
  background-position: 0 - 204px;
  z-index:10;
}

.mod-sidebar .item {
    position: relative;
    width: 48px;
    height: 48px;
    margin-top: Зрх;
    background: url("//gss0.bdstatic.com/5foIcyØa2gI2n2jgoY") no-repeat;
    cursor: pointer;
}
1
2
3
4
5
6
7
8
9
10
11
12
13

iconfont + HTML

iconfont + CSS

iconfont-symbol

方法一：使用 font+html 方式完成。又称：Unicode 引用。

方法二：使用 font+css 方式完成。 又称：font class 方式引用。

方法三：使用 Symbol 方式引用。

Svg-icon

  • 它的英文全称为 Scalable Vector Graphics，意思为可缩放的矢量图形；
  • 用来定义用于网络的基于矢量的图形
  • 用 XML 格式定义图形
  • 图像在放大或改变尺寸的情况下其图形质量不会有所损失

svg-icon 优势

  • SVG 可被非常多的工具读取和修改（比如记事本），文件是纯粹的 XML;
  • SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
  • SVG 是可伸缩的
  • SVG 图像可在任何的分辨率下被高质量地打印
  • SVG 可在图像质量不下降的情况下被放大
  • SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）

inline SVG

这种方法就是直接把 SVG 标签写入到 HTML 中去，直接通过修改 fill 和 stroke 属性来控制填充颜色和边框颜色，但是缺点就是维护性不好，如果一个页面 Icon 特别多，可能要写好几十个 SVG 在页面，复用性差，后期扩展性也不佳。

html
<svg width="74" height="74" viewBox="0 9 4 74">
    <path fill="#444444" d="M25.42 27.737v-11.555c0-6.382 5.174-11.555 11.555-11.555s11.555 5.174 11.555 11.555v11.555h4, 622v-11.555c0-8.935-7.243-16.178-16.178-16.178s-16.178 7.243-16.178 16. 178v11.555h4.622z"></path>
</svg>
1
2
3

Img/Object 标签

这种方法直接将 SVG ICON 保存成一个一个单独文件，通过 img 或 object 标签引用，他的缺点就是请求数增加，每个图标都去独自加载，对服务器负载和页面。高速加载不好

html
<img src="svg/icon.svg" alt=""/>
1

Background And Data URIs

采 background 去调用 SVG 文件 . icon{backgound-image: url(icon.svg)} 如果单独使用 background 引用 SVG 也会和第一种方案一样造成请求数增加，所以有不少人通过使用 base64 编码来减少 HTTP 请求；

SVG Sprites

目前市面上有很多提供 ICONFONT 制作的网站，例如：icomoon 不止开源，而且功能实在强大，可以提供输出 SVG Sprites 的功能，SVG Sprites 它的使用方法其实就跟 Png sprites 是一样的，把多个 SVG ICON 合并到 - 一个 SVG 文件里面去，然后通过 background-position 进行定位，这种方法可以解决请求数增多的问题。

css
.icon{
    width:16px;
    height: 16px;
    display: inline-block;
    background-repeat: no-repeat;
    background-image: url(sprite.svg);
    background-position:0 0;
}
1
2
3
4
5
6
7
8

SVG Defs/Symbols

其实就是在 SVG Sprites. 上面更进一步的使用 了，SVG Sprites 是需要我们去通过坐标获取对应位置图标的，但是 SVG Defs/Symbols 就更简单了，直接通过给每个 SVG ICON 定义 ID，直接调用对应 ID 即可；

html
<svg>
    <use xlink:href="#icon1"></use>
</svg>
<svg>
    <use xlink:href="#icon2"></use>
</svg>
1
2
3
4
5
6

iconfont- 在线链接调用

参考 iconfont

纯 css 代码实现

html
<div class="search icon"></div>
<style>
.ѕеаrсh.ісоn:before{content:'';position: absolute; tор:12рх; lеft:5рх; hеіght:брх;wіdth:1рх;
background-color:currentColor}
.search.icon{color:#000; position: absolute;margin-top :2px ;margin-left:3px;width:12px;
height:12px;border:solid 1px currentColor; border-radius :100%; transform: rotate(-45deg)}
.search-solid.icon:after{ content: '' ;position: absolute ;left:1px;top: 1px;width:10px;height:10px;
background-color :currentColor; border-radius:50%}
.search-solid.icon:before{content:'';position: absolute; top:12px; left:5px;width:1px;height:6px;
background-color:currentColor}
.search-solid.icon{color:black;position:absolute;margin-top: 2px ;margin-left:3px;width:12px;
height:12px;border:solid 1px currentColor ;border-radius :100%;transform:rotate( -45deg)}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13

Copyright © 2018-2025 Mason

沪ICP备20006251号-1