{"id":7255,"date":"2019-09-17T17:12:37","date_gmt":"2019-09-18T00:12:37","guid":{"rendered":"https:\/\/www.dognmonkey.com\/techs\/?p=7255"},"modified":"2019-09-17T17:12:37","modified_gmt":"2019-09-18T00:12:37","slug":"how-to-create-sprites-and-use-icons-with-css","status":"publish","type":"post","link":"https:\/\/www.dognmonkey.com\/mythemes\/how-to-create-sprites-and-use-icons-with-css.html","title":{"rendered":"How To Create Sprites and Use Icons with CSS"},"content":{"rendered":"

[lightgallery]
\nCreate a sprite with Instant Sprite<\/a>: download the png sprite image and usage.<\/em>
\n[lgallery]\"load<\/a> \"Copy<\/a> \"Save<\/a> \"Final<\/a>[\/lgallery]
\nCSS codes:<\/em><\/p>\n

#return_top a,#youtube a, #bird a{position:fixed;bottom:1px;display:block;width:2.5rem;z-index:100001}
\n#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}
\n#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}
\n#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}
\n#bird a{right:135px;height:40px;background:url(images\/mysprite.png) -156px 0; no-repeat}<\/code><\/p>\n

footer codes:<\/em><\/p>\n

<div id=\"fixed_icons\">
\n<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>
\n<div class=\"fb-share-button\"
\ndata-href=\"\"
\ndata-size=\"large\"
\ndata-layout=\"button_count\">
\n<\/div>
\n<div class=\"fb-like\"
\ndata-href=\"\"
\ndata-size=\"large\"
\ndata-layout=\"button_count\"
\ndata-action=\"like\"
\ndata-show-faces=\"true\">
\n<\/div>
\n<a href=\"https:\/\/twitter.com\/share?ref_src=twsrc%5Etfw\" title=\"tweet post\" target=\"_blank\"><div id=\"bird\"><\/a><\/div>
\n<p id=\"youtube\"><a href=\"https:\/\/www.youtube.com\/user\/3dogs1monkey\/videos\" title=\"Youtube Channel\" target=\"_blank\"><\/a><\/p>
\n<\/div><\/code><\/p>\n