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..

    Leaflet for R: How to change default CSS cluster classes

    How can I create a bold/“cursor” border around a table cell?

    How to resize the width of a div based on another div on it's right, only with CSS(no JS)

    How to make hashtag links work on Internet Explorer?

    How to dynamically import javascript and css files

    How to apply a underline style to piece of text

    How to give different views for same url for different devices with same resolution?

    Error: Dynamically fetching css from CDN with fallback to local copy, How to resolve?

    How to create a table WITHOUT alternating row colors when using Blueprint CSS framework?

    How to create dynamic CSS class in in extjs or javascript

    CSS & Button: How to override native CSS of html buttons element?

    How can I scale the space taken by a scaled element

    CSS, a Fixed Position Div with Dynamic Content - How to Position Another Div Underneath it?

    How to place rectangle inside image and make hover animation for it in CSS?

    Gulp callback - How to tell Gulp to run a task first before another?

    How to keep your current screen position while dynamically showing surrounding elements with jquery / css

    How can you fix the height of an element in IE 6, and allow hidden content to be scrolled into view?

    How to make a td element not wrap text inside a table?

    How to place Social media icons on right side of navbar

    How to hide extra overflow part of this angled css ribbon?

    How to add top-right arrow in bootstrap navbar dropdown menu

    Where and how to add/edit css in roots starter theme

    How to quickly create complex web controls for web development? [closed]

    CSS box-shadow shows weird white region?

    How to create this CSS border

    How to get divs 100% of browser using css?

    GWT: How to catch what code overrides the CSS cursor value. Or why it overrides?

    How to draw heart using HTML/CSS table?

    How to render a template with dynamic CSS?

    css 3d animation, how?