Saturday, 15 August 2015

Custom size .ico with CSS -



Custom size .ico with CSS -

i want define size of loaded .ico file css because default different in firefox , chrome.

html code of link:

class="lang-html prettyprint-override"><a href="https://www.google.com/maps/place/##keyword##" target="_blank" title="show on map" class="showonmap">##keyword##</a>

and css code that:

class="lang-css prettyprint-override">.showonmap { background: url("images/gmaps3.ico") no-repeat scroll right center rgba(0, 0, 0, 0); padding-right: 20px; }

http://jsfiddle.net/eapo/yy8gqt3f/1/ (check different browser see problem)

i hope can solve without "changing file type", "using element"

use background-size:

.showonmap { background: url("https://maps.gstatic.com/favicon3.ico") no-repeat scroll right center rgba(0, 0, 0, 0); padding-right: 20px; background-size: 15px 15px; }

demo: http://jsfiddle.net/yy8gqt3f/2/ can create image 100% height, maintaining original aspect ratio:

background-size: auto 100%;

demo: http://jsfiddle.net/yy8gqt3f/4/

css ico

No comments:

Post a Comment