多数适用于pc端网站开发,图片作为背景来呈现图标

方法一:

web常见三种处理图标方法,web两种图标

方法一:

用background制作小图标

bet体育在线 1

像这么,得到统筹稿后把全数的图标放在一张图纸上,利用background-position、width、height来支配图标的地方及大小。

代码:

.icon{display:inline-block;background:url(../images/icon.png);}
.icon1{background-position:0 0;width:16px;height:16px;background-repeat:no-repeat;position:absolute;top:6px;right:6px;}
.icon2{background-position:-20px 0;width:41px;height:18px;margin:10px;}
.icon3{background-position:-29px -41px;width:17px;height:9px;margin-left:10px;}
.icon4{background-position:0 -21px;width:62px;height:14px;}
.icon5{background-position:-65px 0;width:49px;height:49px;margin-top:5px;}

引用时:

<i class="icon icon1"></i>
<i class="icon icon2"></i>
<i class="icon icon3"></i>
<i class="icon icon4"></i>
<i class="icon icon5"></i>

优点:

图形作为背景来展现图标,图标的成效好,不便于现身锯齿

缺点:

图标大小及颜色难以控制,尤其是调响应式时,超越四分之二适用于pc端网站开发,移动端不提议适用

 


 

方法二:

简单来讲的图标可用css绘制,比如:

<i class="box"> <s class="ico"></s></i>

.box{
    display: block;
    width: 200px;
    height: 20px;
    background: gold;
    overflow: hidden;
    position: relative;
    top: 100px;
    left: 200px;/*控制小三角的位置*/
}
.ico{
    width: 100px;
    height: 100px;
    display: block;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    border:5px solid #000 ;
    position : absolute;
    top:30px;
    left:20px;;
}

*也得以行使伪成分:before/:after支持绘制

优点:

比上一种办法节省空间,加载速度快

缺点:

大小不佳控制,图标仅限于简单的,不能够不负众望复杂的图标绘制

 


 

方法三:

常用的书体图标,例如像Ali图标、Font Awesome等,以Ali图标为例:

bet体育在线 2

将您想要的图标参与库,bet体育在线 3点击右上角的购物车形状的图标,弹出如下图效果:

bet体育在线 4

添加至你须求的连串里面,然后再到图标管理-》小编的类型里面去把刚下参与的图标下载至地方:

bet体育在线 5

把下载的解压后,在您的连串里面新建个fonts的文书夹,把之类文件放进去:

bet体育在线 6

在您的体裁文件中援引改字体图标:

@import url("iconfont.css");

在急需调用那个图标的地点插入html:

 <i class="iconfont">&#xe603;</i>

要么那样

<i  class="iconfont icon-zhuye-copy"></i>

优点:

加载速度快,字体大小及颜色方便修改

缺点:

收字体大小的震慑,字体图标呈现的效益会有明显的锯齿

 


 

方法四: 

利用SVG。SVG是一种基于XML的图纸格式。那是一种可缩放的矢量图形。SVG是由W3C制定的正规,在2003年变为了W3C的引荐标准。绝相比较其余的图像格式,SVG的优势在于:SVG能够被许多工具读取和改动、SVG的尺寸更小、SVG图像在其余的分辨率下都足以高品质地打字与印刷。

SVG的施用首要有如下格局:

1.img标签直接引用

这种格局大概,直接把SVG格式图片看作为普通的图纸来引用。那种办法在实际的接纳情状中运用不多。

2.内联方式

IE⑨ 、Firefox、Opera、Chrome及Safari都协理内联的SVG。IE8及以下版本浏览器能够通过安装插件来援助SVG。内联的SVG间接作为HTML文档的一有些,不须求独自请求。内联的SVG使用上很不便于,假若在HTML中投入大段的SVG代码,则很难保险,代码也无力回天复用。

3.Data URIs

这种艺术是把SVG文件一向转成base64编码格式,然后以Data
U瑞虎Is的法子引用。示例代码如下:

.icon{
  background: url(data:text/svg+xml;base64,<base64 encoded data>)
}

 

4.使用SVG中的<symbol>元素

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
    <symbol id="circle-cross" viewBox="0 0 32 32">
      <title>circle-cross icon</title>
      <path d="M16 1.333q2.99 0 5.703 1.161t4.677 3.125 3.125 4.677 1.161 5.703-1.161 5.703-3.125 4.677-4.677 3.125-5.703 1.161-5.703-1.161-4.677-3.125-3.125-4.677-1.161-5.703 1.161-5.703 3.125-4.677 4.677-3.125 5.703-1.161zm0 2.667q-2.438 0-4.661.953t-3.828 2.557-2.557 3.828-.953 4.661.953 4.661 2.557 3.828 3.828 2.557 4.661.953 4.661-.953 3.828-2.557 2.557-3.828.953-4.661-.953-4.661-2.557-3.828-3.828-2.557-4.661-.953zm3.771 6.885q.552 0 .948.391t.396.943-.396.948l-2.833 2.833 2.833 2.823q.396.396.396.938 0 .552-.396.943t-.948.391-.938-.385l-2.833-2.823-2.823 2.823q-.385.385-.948.385-.552 0-.943-.385t-.391-.938q0-.563.385-.948l2.833-2.823-2.833-2.833q-.385-.385-.385-.938t.391-.948.943-.396.948.396l2.823 2.833 2.833-2.833q.396-.396.938-.396z"/>
    </symbol>

    <symbol id="circle-check" viewBox="0 0 32 32">
        <title>circle-check icon</title>
        <path d="M16 1.333q2.99 0 5.703 1.161t4.677 3.125 3.125 4.677 1.161 5.703-1.161 5.703-3.125 4.677-4.677 3.125-5.703 1.161-5.703-1.161-4.677-3.125-3.125-4.677-1.161-5.703 1.161-5.703 3.125-4.677 4.677-3.125 5.703-1.161zm0 2.667q-2.438 0-4.661.953t-3.828 2.557-2.557 3.828-.953 4.661.953 4.661 2.557 3.828 3.828 2.557 4.661.953 4.661-.953 3.828-2.557 2.557-3.828.953-4.661-.953-4.661-2.557-3.828-3.828-2.557-4.661-.953zm4.49 7.99q.552 0 .943.391t.391.943-.396.948l-5.656 5.656q-.385.385-.938.385-.563 0-.948-.385l-2.833-2.823q-.385-.385-.385-.948 0-.552.391-.943t.943-.391.948.396l1.885 1.885 4.708-4.719q.396-.396.948-.396z"/>
    </symbol>

    <!-- .... -->
</svg>

 

使用 id 引用那几个 SVG 中的 Icon 有三种形式

将上述 SVG 作为 body 的首先个成分插入在 HTML 中然后:

<svg class="icon">
  <use xlink:href="#circle-cross"></use>
</svg>

或者,讲SVG保存成文件,以地点方式引用:

<svg class="icon">
  <use xlink:href="/img/posts/svg-icons.svg#circle-check"></use>
</svg>
<svg class="icon">
  <use xlink:href="/img/posts/svg-icons.svg#circle-cross"></use>
</svg>

那种方法利用上跟img标签没有啥样太大的差别了。好处在于拥有的图标都在3个文书中,因而只会呈请三次。
那种不必要像 Sprite 那样繁琐的设置图片的移位。使用 id
命名图标并应用时一直行使 id 引用既直观又简约。 其灵活性和 Inline SVG
大致如出一辙——你能够设置颜色、边线样式、大小等等。
视浏览器的不等,有时你须求利用作为 SVG 标签的起来。

 

http://www.bkjia.com/Javascript/1224255.htmlwww.bkjia.comtruehttp://www.bkjia.com/Javascript/1224255.htmlTechArticleweb常见几种处理图标方法,web几种图标 方法一:
用background制作小图标
像这么,获得统一筹划稿后把拥有的图标放在一张图片上,利用backgrou…

用background制作小图标

bet体育在线 7

像这么,获得统一筹划稿后把拥有的图标放在一张图片上,利用background-position、width、height来支配图标的职责及大小。

代码:

.icon{display:inline-block;background:url(..icon.png);}
.icon1{background-position:0 0;width:16px;height:16px;background-repeat:no-repeat;position:absolute;top:6px;right:6px;}
.icon2{background-position:-20px 0;width:41px;height:18px;margin:10px;}
.icon3{background-position:-29px -41px;width:17px;height:9px;margin-left:10px;}
.icon4{background-position:0 -21px;width:62px;height:14px;}
.icon5{background-position:-65px 0;width:49px;height:49px;margin-top:5px;}

引用时:

<i class="icon icon1"></i>
<i class="icon icon2"></i>
<i class="icon icon3"></i>
<i class="icon icon4"></i>
<i class="icon icon5"></i>

优点:

图形作为背景来显示图标,图标的机能好,不简单出现锯齿

缺点:

图标大小及颜色难以控制,特别是调响应式时,超越六分之三适用于pc端网站开发,移动端不建议适用

 


 

方法二:

简言之的图标可用css绘制,比如:

<i class="box"> <s class="ico"></s></i>

.box{
    display: block;
    width: 200px;
    height: 20px;
    background: gold;
    overflow: hidden;
    position: relative;
    top: 100px;
    left: 200px;/*控制小三角的位置*/
}
.ico{
    width: 100px;
    height: 100px;
    display: block;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    border:5px solid #000 ;
    position : absolute;
    top:30px;
    left:20px;;
}

*也足以应用伪成分:before/:after帮忙绘制

bet体育在线,优点:

比上一种方法节省空间,加载速度快

缺点:

大大小小不佳控制,图标仅限于不难的,无法完结复杂的图标绘制

 


 

方法三:

常用的字体图标,例如像Ali图标、Font
Awesome等,以Ali图标为例:

bet体育在线 8

将你想要的图标参与库,bet体育在线 9点击右上角的购物车形状的图标,弹出如下图效果:

bet体育在线 10

添加至你需求的类型里面,然后再到图标管理-》笔者的门类里面去把刚下进入的图标下载至地点:

bet体育在线 11

把下载的解压后,在您的体系里面新建个fonts的文本夹,把之类文件放进去:

bet体育在线 12

在您的体裁文件中援引改字体图标:

@import url("iconfont.css");

在急需调用这一个图标的地点插入html:

 <i class="iconfont">&#xe603;</i>

抑或那样

<i  class="iconfont icon-zhuye-copy"></i>

优点:

加载速度快,字体大小及颜色方便修改

缺点:

收字体大小的影响,字体图标展现的机能会有显明的锯齿

 


 

方法四: 

运用SVG。SVG是一种基于XML的图样格式。那是一种可缩放的矢量图形。SVG是由W3C制定的正规化,在贰零零贰年变为了W3C的推荐介绍标准。相相比别的的图像格式,SVG的优势在于:SVG能够被过多工具读取和改动、SVG的尺寸更小、SVG图像在别的的分辨率下都能够高品质地打字与印刷。

SVG的行使首要有如下格局:

1.img标签直接引用

那种情势大致,直接把SVG格式图片看作为一般的图形来引用。那种方法在骨子里的运用意况中行使不多。

2.内联格局

IE⑨ 、Firefox、Opera、Chrome及Safari都帮助内联的SVG。IE8及以下版本浏览器可以经过设置插件来支撑SVG。内联的SVG直接当做HTML文书档案的一部分,不须求单独请求。内联的SVG使用上很不便利,假诺在HTML中参与大段的SVG代码,则很难保险,代码也无从复用。

3.Data URIs

那种措施是把SVG文件一直转成base64编码格式,然后以Data
URubiconIs的艺术引用。示例代码如下:

.icon{
  background: url(data:text/svg+xml;base64,<base64 encoded data>)
}

 

4.使用SVG中的<symbol>元素

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
    <symbol id="circle-cross" viewBox="0 0 32 32">
      <title>circle-cross icon</title>
      <path d="M16 1.333q2.99 0 5.703 1.161t4.677 3.125 3.125 4.677 1.161 5.703-1.161 5.703-3.125 4.677-4.677 3.125-5.703 1.161-5.703-1.161-4.677-3.125-3.125-4.677-1.161-5.703 1.161-5.703 3.125-4.677 4.677-3.125 5.703-1.161zm0 2.667q-2.438 0-4.661.953t-3.828 2.557-2.557 3.828-.953 4.661.953 4.661 2.557 3.828 3.828 2.557 4.661.953 4.661-.953 3.828-2.557 2.557-3.828.953-4.661-.953-4.661-2.557-3.828-3.828-2.557-4.661-.953zm3.771 6.885q.552 0 .948.391t.396.943-.396.948l-2.833 2.833 2.833 2.823q.396.396.396.938 0 .552-.396.943t-.948.391-.938-.385l-2.833-2.823-2.823 2.823q-.385.385-.948.385-.552 0-.943-.385t-.391-.938q0-.563.385-.948l2.833-2.823-2.833-2.833q-.385-.385-.385-.938t.391-.948.943-.396.948.396l2.823 2.833 2.833-2.833q.396-.396.938-.396z"/>
    </symbol>

    <symbol id="circle-check" viewBox="0 0 32 32">
        <title>circle-check icon</title>
        <path d="M16 1.333q2.99 0 5.703 1.161t4.677 3.125 3.125 4.677 1.161 5.703-1.161 5.703-3.125 4.677-4.677 3.125-5.703 1.161-5.703-1.161-4.677-3.125-3.125-4.677-1.161-5.703 1.161-5.703 3.125-4.677 4.677-3.125 5.703-1.161zm0 2.667q-2.438 0-4.661.953t-3.828 2.557-2.557 3.828-.953 4.661.953 4.661 2.557 3.828 3.828 2.557 4.661.953 4.661-.953 3.828-2.557 2.557-3.828.953-4.661-.953-4.661-2.557-3.828-3.828-2.557-4.661-.953zm4.49 7.99q.552 0 .943.391t.391.943-.396.948l-5.656 5.656q-.385.385-.938.385-.563 0-.948-.385l-2.833-2.823q-.385-.385-.385-.948 0-.552.391-.943t.943-.391.948.396l1.885 1.885 4.708-4.719q.396-.396.948-.396z"/>
    </symbol>

    <!-- .... -->
</svg>

 

应用 id 引用这么些 SVG
中的 Icon 有二种方式

将上述 SVG 作为 body
首先个成分插入在 HTML 中然后:

<svg class="icon">
  <use xlink:href="#circle-cross"></use>
</svg>

或者,讲SVG保存成文件,以地点情势引用:

<svg class="icon">
  <use xlink:href="/img/posts/svg-icons.svg#circle-check"></use>
</svg>
<svg class="icon">
  <use xlink:href="/img/posts/svg-icons.svg#circle-cross"></use>
</svg>

这种艺术利用上跟img标签没有何太大的歧异了。好处在于具有的图标都在2个文件中,因而只会呈请三回。
那种不供给像 7-Up 那样繁琐的装置图片的活动。使用 id
命名图标并应用时一贯使用 id 引用既直观又简单。 其灵活性和 Inline SVG
差不离同样——你能够安装颜色、边线样式、大小等等。
视浏览器的两样,有时你须要运用作为 SVG 标签的发端。

 

相关文章