[lightgallery]
Create a sprite with Instant Sprite: download the png sprite image and usage.
[lgallery]
[/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>
- How To Create Sprites and Use Icons with CSS
- How To Implement EU Cookies Warning
- Create Shortcodes for Color Buttons With Links
- Magnific-Popup
- Create Responsive Theme For WordPress With Twenty Ten