总所周知，网页的美观程度往往比这个网页的使用程度更重要，因为它能直接吸引用户的眼球。在网页中，小图标在美工方面的作用更是不言而喻，小图标种类多样，给人以直观的反映。在现有的网站中，99.9%的网站都采用了小图标，说明了小图标的重要性。这里介绍学习到的三种实现小图标的重要方法。

网页中 Icon 画小图标的方法：

A、CSS Sprite

B、font + HTML

C、font + CSS

一、CSS+Sprite

通过这种方法主要是利用自己已经做好的icon图片的宽度和长度大小来调节位置，这种方法实现简单，但是后期修改很困难，因为网站的间隙要跟图片匹配在一起。

这是我所拥有的图片，我已经标记好的间隔，接下来实现如下图的功能：

整个工程项目结构：

index.html

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>css sprite图标显示</title><link rel="stylesheet" href="css/basic.css"><link rel="stylesheet " href="css/sprite.css"><link rel="stylesheet" href="http://i.icomoon.io/public/temp/943f37486f/UntitledProject/style.css
"><script src="js/jquery.min.js"></script><script src="js/sprite.js"></script></head>
<body><ul class="sprite"><li><s class="s-icon"></s><a href="">商品类别1</a></li><li><s class="s-icon"></s><a href="">商品类别2</a></li><li><s class="s-icon"></s><a href="">商品类别3</a></li><li><s class="s-icon"></s><a href="">商品类别4</a></li><li><s class="s-icon"></s><a href="">商品类别5</a></li><li><s class="s-icon"></s><a href="">商品类别6</a></li><li><s class="s-icon"></s><a href="">商品类别7</a></li><li><s class="s-icon"></s><a href="">商品类别8</a></li><li><s class="s-icon"></s><a href="">商品类别9</a></li><li><s class="s-icon"></s><a href="">商品类别10</a></li><li><s class="s-icon"></s><a href="">商品类别11</a></li>
</ul>
</body>
</html>

sprite.js

/*** Created by HY-PC on 2015/1/6.*/
/*$(function(){var iconH=$(".sprite").find("s").height();
//    console.log(iconH);var getLi=$(".sprite").children("li");getLi.forEach(function(){var $this=$(this),$inedx=$this.index();$this.children("s").css("background-postion","0 -"+iconH*$inedx+"px")})
})*/
$(function(){var iconH = $(".sprite").find("s").height(),triggerLi = $(".sprite").children("li");console.log(iconH);triggerLi.each(function(){var $this = $(this),$index = $this.index();//console.log($index)//console.log(iconH*$index);$this.children("s").css("background-position","0 -"+ iconH*$index +"px")$this.hover(function(){// 鼠标移入$this.children("s").css("background-position","-26px -"+ iconH*$index +"px")},function(){// 鼠标移出$this.children("s").css("background-position","0 -"+ iconH*$index +"px")})})
})

sprite.css

.sprite{margin: 10px auto;width: 206px;border: 1px solid #b51600;
}
.sprite li{cursor: pointer;height: 42px;width: 206px;background-color: #b51600;border-bottom: 1px solid #911001;border-top: 1px solid #c11e08;
}
.sprite li a {color: #fff;line-height: 42px;font-size: 14px;
}.sprite li s{height: 40px;width: 24px;display: block;margin-left: 10px;margin-right: 8px;float: left;background-image: url("../images/s-icon.png");
}.sprite li:hover{background-color: #fff;border-color: #fff
}
.sprite li:hover a{color: #b51600;
}
.sprite li:hover s{}
.icon-twitter{color: #f00;}
.icon-twitter:hover{color: #fff;}
.image{text-align:center;font-size:200px;}

二、font+HTML

顾名思义，font就是将图片字体化，常用的格式是我们熟知的svg，用font表示小图标比上面的方法有很多优势：修改图标颜色只需修改字体颜色，修改图片大小只需修改字体大小，这样对我们队小图标的灵活使用提供了方便。

关于字体图片，我们可以自己制作，也可以网上下载（https://icomoon.io/app/#/select），有很多渠道获取，这里就不再详细描述了。

接下来实现这样的功能：

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="css/basic.css"><link rel="stylesheet" href="css/fontHtml.css">
</head>
<body><ul class="layout"><li><a href=""><i style="color: #efe0ce;" class="imooc-icon"></i></a></li><li><a href=""><i style="color: #ef7073;" class="imooc-icon"></i></a></li><li><a href=""><i style="color: #78ade3;" class="imooc-icon"></i></a></li><li><a href=""><i style="color: #eae77f;" class="imooc-icon"></i></a></li><li><a href=""><i style="color: #3c3c3c;" class="imooc-icon"></i></a></li><li><a href=""><i style="font-size:30px;" class="imooc-icon"></i></a></li><li><a href=""><i style="font-size:60px;" class="imooc-icon"></i></a></li><li><a href=""><i style="font-size:90px;" class="imooc-icon"></i></a></li><li><a href=""><i style="font-size:120px;" class="imooc-icon"></i></a></li><li><a href=""><i style="font-size:148px;" class="imooc-icon"></i></a></li></ul>
</body>
</html>

basic.css

@charset "UTF-8";
/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{ margin: 0; padding: 0; }
fieldset,img{ border: 0; }
:focus{ outline: 0; }
address,caption,cite,code,dfn,em,strong,th,var,optgroup{ font-style: normal; font-weight: normal; }
h1,h2,h3,h4,h5,h6{ font-size: 100%; font-weight: normal; font-family: "Microsoft YaHei"; }
abbr,acronym{ border: 0; font-variant: normal; }
code,kbd,samp,tt{ font-size: 100%; }
input,button,textarea,select{ *font-size: 100%; border:none;}
body{ background: #e9e9e9; color:#5e5e5e; font: 14px/2em Microsoft YaHei,SimSun,Arial;}
ol,ul{ list-style: none; }
table{ border-collapse: collapse; border-spacing: 0; }
caption,th{ text-align: left; }
sup,sub{ font-size: 100%; vertical-align: baseline; }
:link, :visited, ins{ text-decoration: none; }
blockquote,q{ quotes: none; }
blockquote:before, blockquote:after, q:before, q:after{ content: ''; content: none; }
a:link, a:visited{ color: #5e5e5e;}
a:hover { color:#c9394a;}
a:active { color: #666;}
.clearfix:after{content:'\0020';display:block;height:0;clear:both;visibility:hidden;}
.clearfix{*zoom:1;}
.l{float:left;}
.r{float:right;}
.clear{ height:0; overflow:hidden; clear:both}

fontHTML.css

 .layout{width: 750px;height: 300px;margin: 50px auto;border: 1px solid #ccc;border-top: 0;overflow: hidden;}.layout li{width: 20%;height: 150px;line-height: 150px;float: left;text-align: center;}.layout li a{background-color: #f4f4f4;color: #888;height: 150px;border-top: 1px solid #ccc;border-left: 1px solid #ccc;/* margin-left: -1px; */display: block;}.layout li a:hover{background-color: #fff;color: red;}@font-face{font-family: "imooc-icon";src: url("../fonts/icomoon.eot"); /* IE9 兼容模式 */src: url("../fonts/icomoon.eot?#iefix") format("embedded-opentype"),url("../fonts/icomoon.woff") format("woff"),url("../fonts/icomoon.ttf") format("truetype"),url("../fonts/icomoon.svg") format("svg");font-weight: normal;font-style: normal;}.imooc-icon{font-family: "imooc-icon";font-style: normal;font-weight: normal;font-size: 64px;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}

三、font+CSS

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="css/basic.css"><link rel="stylesheet" href="css/fontCSS.css">
</head>
<body><ul class="layout"><li><i class="icon  icon-like shadow"></i></li><li><i class="icon icon-spinner spinner"></i></li><li><i class="icon icon-heart love"></i></li></ul><script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><script>$(".love").on("click",function(){var $this = $(this);$this.addClass("btn-activated")setTimeout(function(){$this.removeClass("btn-activated")},500)})</script>
</body>
</html>

fontCSS.css

    .layout{width: 750px;height: 251px;margin: 50px auto;border: 1px solid #ccc;border-top: 0;}.layout li{width: 250px;height: 250px;   line-height: 250px; float: left;text-align: center;background-color: #f4f4f4;color: #b13947;border-top: 1px solid #ccc; border-left: 1px solid #ccc;margin-left: -1px;font-size: 148px;}@font-face{font-family: "imooc";src: url("../fonts/imooc.eot");/* IE9兼容 */src: url("../fonts/imooc.eot?#iefix") format("embedded-opentype"),url("../fonts/imooc.woff") format("woff"),url("../fonts/imooc.ttf") format("truetype"),url("../fonts/imooc.svg") format("svg");font-weight: normal;font-style: normal;
}
.icon{font-family: "imooc";font-weight: normal;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}.icon-spinner:before {content: "\e600";
}
.icon-heart:after {content: "\e602";
}
.icon-heart:before {content: "\e601";
}
.icon-like:before {content: "\e603";
}.shadow{color: #fff;text-shadow: 5px 5px 0px #b13947, 10px 10px 0px rgba(0, 0, 0, 0.15);
}
.spinner{-webkit-animation: spinner 2s infinite linear;animation: spinner 2s infinite linear;
}
@-webkit-keyframes spinner {0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}100% {-webkit-transform: rotate(359deg);transform: rotate(359deg);}
}
@keyframes spinner {0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}100% {-webkit-transform: rotate(359deg);transform: rotate(359deg);}
}.love{position: relative;width: 100%;height: 100%;display: block;vertical-align: middle;text-align: center;cursor: pointer;
}
.love:before,.love:after{position: absolute;top: 0;left: 0;width: 100%;height: 100%;
}
.love:after{z-index: 0;color: #cecece;-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;backface-visibility: hidden;
}
.love:before{z-index: 1;color: #ea515e;-webkit-transform: scale(0);-moz-transform: scale(0);-ms-transform: scale(0);transform: scale(0);opacity: 0;-webkit-transition: none;-moz-transition: none;transition: none;
}
.love.btn-activated:before {-webkit-animation: scaleFade 0.5s forwards;-moz-animation: scaleFade 0.5s forwards;animation: scaleFade 0.5s forwards;
} @-webkit-keyframes scaleFade {50% { opacity: 1;-webkit-transform: scale(1);}100% {opacity: 0;-webkit-transform: scale(2.5);}
}@-moz-keyframes scaleFade {50% { opacity: 1;-moz-transform: scale(1);}100% {opacity: 0;-moz-transform: scale(2.5);}
}@keyframes scaleFade {50% { opacity: 1;transform: scale(1);}100% {opacity: 0;transform: scale(2.5);}
}

四、总结

通过对网页小图标的研究学习，我也逐渐发现了小图标icon的奥妙，在网页中看似不起眼却起着锦上添花的作用，这三种方法都有各自的优势，当然，我更喜欢用font来控制在，它的灵活度很高，而且网页放大也不会存在锯齿现象，可以适用于任何平台，这也有很好的体验感。而且我也发现我的基础知识不牢固，后面也需要不断用更牢固的知识来武装自己。

在网页中实现icon小图标的几种方法相关推荐

html+input改变图标,JS Input里添加小图标的两种方法
我们在做网页的时候,经常需要在input里面添加小图标,那么这里就介绍比较常见的两种方法. 将小图标当做input的背景来插入,直接上代码吧: Box{ height: 50px; backgroun ...
html密码框怎么添加小图标,JS Input里添加小图标的两种方法
我们在做网页的时候,经常需要在input里面添加小图标,那么这里就介绍比较常见的两种方法. 方法一将小图标当做input的背景来插入,直接上代码吧: *{ margin: 0; padding: 0 ...
input 单击图标_JS Input里添加小图标的两种方法
我们在做网页的时候,经常需要在input里面添加小图标,那么这里就介绍比较常见的两种方法. 方法一将小图标当做input的背景来插入,直接上代码吧: *{ margin: 0; padding: 0 ...
网页中嵌入外部页面的四种方法
一．应用框架技术 ---- 要在宿主页面中嵌入外部页面的方法是,在宿主页面中包含外部页面的位置插入"< IFRAME name="XXX" width=X hei ...
html边框直线,在网页中实现细线边框的两种方法-网页设计,HTML/CSS
很多朋友都有过制作网页的经历,如今,众多网页的设计都用到了表格.这样不仅有利于网页的维护,同时,提高了网页的观赏性.在众多网页制作风格中,细边框这个制作方法是必不可少的.这里,我将简单地谈一下细边框的 ...
html中border细线样式,网页中实现细线边框的两种方法
很多朋友都有过制作网页的经历,如今,众多网页的设计都用到了表格.这样不仅有利于网页的维护,同时,提高了网页的观赏性.在众多网页制作风格中,细边框这个制作方法是必不可少的.这里,我将简单地谈一下细边框的 ...
python中字符串怎么引用_Python：字符串中引用外部变量的3种方法
方法一: username=input('username:') age=input('age:') job=input('job:') salary=input('salary') info1='' ...
html title中加图标,科技常识：HTML中title前面小图标的实现_如何给网页标题添加icon小图标...
今天小编跟大家讲解下有关HTML中title前面小图标的实现_如何给网页标题添加icon小图标 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关HTML中title前面小图标的实现_如何给网 ...
在网页中画Icon小图标
在网页中画Icon小图标. 现代网页中,绝大部分都采用了Icon小图标的方式.其积分大致分为三类,CSS Sprite,font+HTML,font+CSS. CSS Sprite:又称为CSS雪碧, ...

在网页中实现icon小图标的几种方法

一、CSS+Sprite

二、font+HTML

三、font+CSS

四、总结

在网页中实现icon小图标的几种方法相关推荐

最新文章

热门文章