HTML+Js实战项目|在网页中实现icon小图标的几种方法 js|css|小图标|icon|html

总所周知，网页的美观程度往往比这个网页的使用程度更重要，因为它能直接吸引用户的眼球。在网页中，小图标在美工方面的作用更是不言而喻，小图标种类多样，给人以直观的反映。在现有的网站中，99.9%的网站都采用了小图标，说明了小图标的重要性。这里介绍学习到的三种实现小图标的重要方法。
网页中 Icon 画小图标的方法： A、CSS Sprite B、font + HTML C、font + CSS 一、CSS+Sprite 通过这种方法主要是利用自己已经做好的icon图片的宽度和长度大小来调节位置，这种方法实现简单，但是后期修改很困难，因为网站的间隙要跟图片匹配在一起。
文章图片

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

文章图片

整个工程项目结构：

文章图片

文章图片

index.html

css sprite图标显示 - 锐客网商品类别1 商品类别2 商品类别3 商品类别4 商品类别5 商品类别6 商品类别7 商品类别8 商品类别9 商品类别10 商品类别11

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

Document - 锐客网 ? ?        

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

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来控制在，它的灵活度很高，而且网页放大也不会存在锯齿现象，可以适用于任何平台，这也有很好的体验感。而且我也发现我的基础知识不牢固，后面也需要不断用更牢固的知识来武装自己。 【HTML+Js实战项目|在网页中实现icon小图标的几种方法】