How to style a png icon with CSS?


Tags: css,image,png,styling

Problem :

I have a PNG image that I'm using as an icon. It's a slightly different take on a play button. I know that when I used the font-awesome play button icon, I could do all sorts of things to that with CSS.

enter image description here

How do I make my png image icon stylable? Do I need to convert it to a different file?



Solution :

If you want to target paths of an svg, and use standard CSS rules, it has to be an .svg vector file.

You can create them in a variety of programs. In Adobe Illustrator, you 'save-as' > 'svg' > note the bottom of that pane - see the svg code > copy it > past it somewhere smart.

The png is a bitmap and is just a square you can resize and turn and stuff.


HTML

<div class="image-w bitmap-logo">
    <img src="http://placehold.it/400x200" alt="" />
</div>

<div class="image-w svg-logo">
    <?php require('big-svg-thing.php')?>
        or...
    {{partial 'big-svg-thing'}}
</div>

If you use PHP or handelbars or htmlbars etc... just to keep the svg code out of your way.


CSS ideas for you

With images that need to resize all the time... I put them in .image-w to control them and to compress their pixels for retina screen.

Attached is a fiddle --- because the svg is super ugly/long code

Note that I added classes to the parts of the svg that I wanted to style

/* global / overall image styles */
.image-w img, .image-w svg {
    display: block;
    width: 100%;
    height: auto;
}

svg path { /* good preset for svg / sets 'fill' to casdade like color */
    fill: currentColor;
}  

.bitmap-logo { /* things you might do with you bitmap */
    max-width: 200px;
    transform: rotate(10deg);
    opacity: .2;
    border: 2px solid red;
}

.svg-logo { /* svg */
    max-width: 300px;
}

.svg-box { /* parts of the svg */
    color: blue;
}

.svg-squigle {
    color: red;
}

    CSS Howto..

    How to add a line break inside with CSS?

    How to add-class and focus the children on keydown function

    divs hide and show

    how to optimize Less CSS? how to generate 1 minified version of all less files? I am also using modifyVars

    How to fluid images when resize window?

    how to align divs vertically in html and css?

    how to create an alphabet letter selector that spans an entire div width

    How to keep a div's height 100%?

    How to set css style to asp.net button?

    How to add css box-shadow using .style javascript property

    How to properly float this image verticaly aligned?

    How can I get a block to print complicated divs horizontally?

    How To Display only First Word of H2 Heading With JavaScript or CSS

    How to achieve this layout with CSS and div?

    how to load multiple lazy css load file

    How can I place two grid items above each other using Susy?

    How to arrange subchild in the horizontal menu

    How to show scrollbar when the inner content is aligned to bottom?

    How do I show divs in an IE print preview page that are programmatically hidden via javascript?

    How to change the width of dynamically generated list boxes, based on user input?

    Javascript jQuery only shows Image element once in IE. FF works

    How to target element which have spaces in it's class name css?

    How I can get an Image height and divide it by 2 using Jquery

    How can I have an image float next to a centered div?

    How to combine Background Image and CSS Gradient

    How to reduce the gap between HTML5 video tag

    How do I add a class to a default bootstrap class

    How to make a foreground image using CSS?

    How to trigger css3 rotate effect by clicking?

    How to write css fallbacks for vh vw