如何用CSS精灵创建简单的社交图标

社会雪碧 社交网络正成为营销你自己和你的网站的一个越来越重要的方面。我个人注册了至少10个社交网络,每天至少使用3-5个。我认为在你的网站上链接不同的社交网络几乎是必要的。

肯定的是,你可能是老派,只是扔这样的链接:Facebook | Twitter | LinkedIn。

但是,让我们现实一点,外表很重要。

下面,你会发现一些代码和视频,可以帮助你为你的网站建立一个有吸引力的社交图标CSS精灵。这个CSS精灵将使你很容易添加社会图标,以及保持你的网站快速通过不打图像调用。

的代码

下面是实现社会图标css sprite所需的代码。它被分解成CSS,你需要将其放入style.css中,然后是一些HTML,你可以在网站的任何地方使用。

CSS

ul.socialicons list-style:none;overflow:auto;ul.socialicons li width:32px;height:33px;padding:0 5px 0 0 0;float:left;ul.socialicons li a width:32px;height:33px;display:block;background:url(sociasprite.png)no repeat;}ul.社交图标li a.偶然发现背景位置:0;}ul.socialicons li a.stumbleupon:悬停背景位置:-38px 0;}ul.socialicons li a.digg { background-position: 0 -36px;}ul.socialicons li a.digg:hover { background-position: -38px -36px;}ul.socialicons li a.facebook背景位置:0-73px;}ul.socialicons li a.facebook:悬停背景位置:-38px-73px;}ul.socialicons li a.twitter { background-position: 0 -109px;}ul.socialicons li a.twitter:悬停背景位置:-38px-109px;}ul.社交图标li a.美味背景位置:0-146px;}ul.socialicons li a.delicious:悬停背景位置:-38px-146px;}ul.socialicons li a.flickr背景位置:0-183px;}ul.socialicons li a.flickr:悬停背景位置:-38px-183px;}ul.socialicons li a.youtube背景位置:0-219px;}ul.socialicons li a.youtube:悬停背景位置:-38px-219px;}ul.socialicons li a.skype背景位置:0-256px;}ul.socialicons li a.skype:悬停背景位置:-38px-256px;}ul.socialicons li a.linkedin背景位置:0-292px;}ul.socialicons li a.linkedin:hover { background-position: -38px -292px;}ul.社交图标li a.vimeo背景位置:0-329px;}ul.socialicons li a.vimeo:悬停背景位置:-38px-329px;}ul.socialicons li a.blogger背景位置:0-365px;}ul.socialicons li a.blogger:悬停背景位置:-38px-365px;}ul.socialicons li a.tumblr背景位置:0-402px;}ul.socialicons li a.tumblr:悬停背景位置:-38px-402px;}ul.socialicons li a.picasa背景位置:0-438px;}ul.socialicons li a.picasa:悬停背景位置:-38px-438px;}ul.socialicons li a.亚博yabo88app 下载wordpress背景位置:0-475px;}ul.socialicons li a.亚博yabo88app 下载wordpress:hover { background-position: -38px -475px;}ul.socialicons li a.rss背景位置:0-511px;}ul.socialicons li a.rss:悬停背景位置:-38px-511px;}ul.socialicons li a.mobileme背景位置:0-548px;}ul.socialicons li mobileme:悬停背景位置:-38px-548px;}ul.socialicons li a.apple背景位置:0-585px;}ul.socialicons li a.apple:悬停背景位置:-38px-585px;}ul.socialicons li a.gpluslight背景位置:0-621px;}ul.socialicons li a.gpluslight:悬停背景位置:-38px-621px;}ul.socialicons li a.gplusdark背景位置:0-694px;}ul.socialicons li a.gplusdark:悬停背景位置:-38px-694px;}ul.socialicons li a.twitterb背景位置:0-658px;}ul.socialicons li a.twitterb:悬停背景位置:-38px-658px;}ul.socialicons li a.instagram背景位置:0-731px;}ul.socialicons li a.instagram:悬停背景位置:-38px-731px;}ul.socialicons li a.myspace背景位置:0-767px;}ul.socialicons li a.myspace:悬停背景位置:-38px-767px;}ul.社交图标li a.运球背景位置:0-803px;}ul.socialicons li a.dribble:悬停背景位置:-38px-803px;}ul.socialicons li a.blip背景位置:0-838px;}ul.socialicons li a.blip:悬停背景位置:-38px-838px;}ul.socialicons li a.spotify背景位置:0-874px;}ul.socialicons li a.spotify:悬停背景位置:-38px-874px;}ul.socialicons li a.grooveshark背景位置:0-910px;}ul.socialicons li a.grooveshark:悬停背景位置:-38px-910px;}ul.socialicons li a.ichat背景位置:0-946px;}ul.socialicons li a.ichat:悬停背景位置:-38px-946px;}ul.socialicons li a.github背景位置:0-981px;}ul.socialicons li a.github:悬停背景位置:-38px-981px;}ul.socialicons li a.soundcloud背景位置:0-1017px;}ul.socialicons li a.soundcloud:悬停背景位置:-38px-1017px;}ul.socialicons li a.pinterest背景位置:0-1053px;}ul.socialicons li a.pinterest:悬停背景位置:-38px-1053px;}ul.socialicons li a.smugmug背景位置:0-1088px;}ul.socialicons li a.smugmug:悬停背景位置:-38px-1088px;}ul.socialicons li a.virb背景位置:0-1124px;}ul.socialicons li a.virb:悬停背景位置:-38px-1124px;}ul.socialicons li a.technorait背景位置:0-1160px;}ul.socialicons li a.technorait:悬停背景位置:-38px-1160px;}ul.socialicons li a.slashdot背景位置:0-1195px;}ul.socialicons li a.slashdot:悬停背景位置:-38px-1195px;}ul.socialicons li a.share此背景位置:0-1231px;}ul.socialicons li a.sharethis:悬停背景位置:-38px-1231px;}ul.socialicons li a.posterous背景位置:0-1267px;}ul.socialicons li a.posterous:悬停背景位置:-38px-1267px;}ul.socialicons li a.googleb { background-position: 0 -1302px;}ul.socialicons li a.googleb:悬停背景位置:-38px-1302px;}ul.socialicons li a.reddit背景位置:0-1338px;}ul.socialicons li a.reddit:悬停背景位置:-38px-1338px;}ul.socialicons li a.friendfollow背景位置:0-1374px;}ul.socialicons li a.friendfollow:悬停背景位置:-38px-1374px;}ul.socialicons li a.designfloat背景位置:0-1409px;}ul.socialicons li a.designfloat:悬停背景位置:-38px-1409px;}ul.socialicons li a.amazon背景位置:0-1445px;}ul.socialicons li a.amazon:悬停背景位置:-38px-1445px;}ul.socialicons li a.netvibes背景位置:0-1481px;}ul.socialicons li a.netvibes:悬停背景位置:-38px-1481px;}ul.socialicons li a.bing背景位置:0-1516px;}ul.socialicons li a.bing:悬停背景位置:-38px-1516px;}ul.socialicons li a.yahoo背景位置:0-1552px;}ul.socialicons li a.yahoo:悬停背景位置:-38px-1552px;}ul.社交图标li a.aim背景位置:0-1588px;}ul.socialicons li a.aim:悬停背景位置:-38px-1588px;}ul.socialicons li a.email背景位置:0-1623px;}ul.socialicons li a.email:悬停背景位置:-38px-1623px;}ul.socialicons li a.ebay背景位置:0-1659px;}ul.socialicons li a.ebay:悬停背景位置:-38px-1659px;}ul.socialicons li a.paypal背景位置:0-1695px;}ul.socialicons li a.paypal:悬停背景位置:-38px-1695px;}ul.socialicons li a.feedburner背景位置:0-1730px;}ul.socialicons li a.feedburner:悬停背景位置:-38px-1730px;}ul.socialicons li a.podcast背景位置:0-1766px;}ul.socialicons li a.podcast:悬停背景位置:-38px-1766px;}ul.socialicons li a.appstoreios背景位置:0-1802px;}ul.socialicons li a.appstoreios:悬停背景位置:-38px-1802px;}ul.socialicons li a.itunes背景位置:0-1837px;}ul.socialcons li a.itunes:悬停背景位置:-38px-1837px;}ul.socialicons li a.appstoremac背景位置:0-1873px;}ul.socialicons li a.appstoremac:悬停背景位置:-38px-1873px;}ul.社交图标li a.yelp背景位置:0-1909px;}ul.socialicons li a.yelp:hover { background-position: -38px -1909px;}ul.socialicons li a.w三个背景位置:0-1944px;}ul.socialicons li a.wthree:悬停背景位置:-38px-1944px;}ul.socialicons li a.etsy背景位置:0-980px;}ul.socialicons li a.etsy:悬停背景位置:-38px-1980px;}ul.socialicons li a.stackoverflow背景位置:0-2016px;}ul.socialicons li a.stackoverflow:悬停背景位置:-38px-2016px;}ul.社交图标li a.foursquare背景位置:0-2051px;}ul.socialicons li a.foursquare:悬停背景位置:-38px-2051px;}ul.socialicons li a.quora背景位置:0-2087px;}ul.socialicons li a.quora:悬停背景位置:-38px-2087px;}ul.socialicons li a.photobucket背景位置:0-2123px;}ul.socialicons li a.photobucket:悬停背景位置:-38px-2123px;}

HTML

这个HTML可以放在主题中的任何地方。我在WordPress博客的一个文本小部件中添加了类似的HTML代码。亚博yabo88app 下载

            

图像

你现在唯一缺少的是图像。把这个图像然后上传到你的网站。然后你将得到图片的URL,并将其添加到css by for ul.socialicons li a中。

你可以,当然,将此图像导入您最喜欢的图像编辑器中,并将其编辑到只有所需图标的位置。这需要更多的工作,但是可以稍微修剪一下。值得吗?你告诉我;)

在关闭

看完视频,得到上面的代码后,如果您有任何问题,请在下面留言。我会尽快给你答复的。现在我的个人博客上有了这些图标,它们运行得很好。

Eric Binnion是中西部州立大学计算机科学专业的学生。当Eric不在线时,他通常在他的社区做志愿者或享受与家人在一起的时光。你可以在上面找到埃里克推特