您的位置：首页 > 其它

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

2015-01-08 09:44 495 查看

总所周知，网页的美观程度往往比这个网页的使用程度更重要，因为它能直接吸引用户的眼球。在网页中，小图标在美工方面的作用更是不言而喻，小图标种类多样，给人以直观的反映。在现有的网站中，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来控制在，它的灵活度很高，而且网页放大也不会存在锯齿现象，可以适用于任何平台，这也有很好的体验感。而且我也发现我的基础知识不牢固，后面也需要不断用更牢固的知识来武装自己。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航