在网页中实现icon小图标的几种方法
总所周知，网页的美观程度往往比这个网页的使用程度更重要，因为它能直接吸引用户的眼球。在网页中，小图标在美工方面的作用更是不言而喻，小图标种类多样，给人以直观的反映。在现有的网站中，99.9%的网站都采用了小图标，说明了小图标的重要性。这里介绍学习到的三种实现小图标的重要方法。
网页中 Icon 画小图标的方法：
A、CSS Sprite
B、font + HTML
C、font + CSS
一、CSS+Sprite
通过这种方法主要是利用自己已经做好的icon图片的宽度和长度大小来调节位置，这种方法实现简单，但是后期修改很困难，因为网站的间隙要跟图片匹配在一起。
这是我所拥有的图片，我已经标记好的间隔，接下来实现如下图的功能：
整个工程项目结构：
index.html
css sprite图标显示
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{
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
@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} .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
Document
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来控制在，它的灵活度很高，而且网页放大也不会存在锯齿现象，可以适用于任何平台，这也有很好的体验感。而且我也发现我的基础知识不牢固，后面也需要不断用更牢固的知识来武装自己。