Techs11 | dognmonkey.com

macOS, Windows OS, Apple Software, iOS, WordPress, Internet, IoT, Net Working, Electronics, iPhone, Android, Hackintosh
Final Icons Display
CSS Themes website speed

How To Create Sprites and Use Icons with CSS


Create a sprite with Instant Sprite: download the png sprite image and usage.
[lgallery]load icons to Instant Sprite Copy Usage for x-y position Save Sprite as PNG image Final Icons Display[/lgallery]
CSS codes:

#return_top a,#youtube a, #bird a{position:fixed;bottom:1px;display:block;width:2.5rem;z-index:100001}
#fixed_icons{background:linear-gradient(270deg,#ddd,#777 80%) no-repeat;padding:0 2%;position:fixed;width:100%;height:2.5rem;bottom:0;margin:0 auto;z-index:10001}
#home_icon a{position:fixed;right:44px;bottom:1px;display:block;height:43px;width:44px;background:url(images/mysprite.png) -100px 0; no-repeat;z-index:100001}
#return_top a{right:0;height:40px;background:url(images/mysprite.png) 0 0; no-repeat}#youtube a{right:90px;height:40px;background:url(images/mysprite.png) -50px 0; no-repeat}
#bird a{right:135px;height:40px;background:url(images/mysprite.png) -156px 0; no-repeat}

footer codes:

<div id="fixed_icons">
<div id="return_top"><a href="#masthead" title="Go To Top"></a></div><div id="home_icon"><a href="<?php echo esc_url(home_url('/')); ?>" title="Go Home"></a></div>
<div class="fb-share-button"
data-href=""
data-size="large"
data-layout="button_count">
</div>
<div class="fb-like"
data-href=""
data-size="large"
data-layout="button_count"
data-action="like"
data-show-faces="true">
</div>
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" title="tweet post" target="_blank"><div id="bird"></a></div>
<p id="youtube"><a href="https://www.youtube.com/user/3dogs1monkey/videos" title="Youtube Channel" target="_blank"></a></p>
</div>

 

Paid Links

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.