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

最新推荐文章于 2024-05-13 01:47:56 发布

羊子雄起

最新推荐文章于 2024-05-13 01:47:56 发布

阅读量4w

点赞数 4

分类专栏： HTML+Js实战项目文章标签： html js css 小图标 icon

本文链接：https://blog.csdn.net/comeonyangzi/article/details/42520149

版权

HTML+Js实战项目专栏收录该内容

11 篇文章 1 订阅

订阅专栏

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

羊子雄起

关注

4
点赞
踩
28

收藏

觉得还不错? 一键收藏
0
评论
在网页中实现icon小图标的几种方法

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

扫一扫

专栏目录