CODEWITHSUNDEEP
cssimagepngstyling
Kyle Pennell
Kyle Pennell

Reputation: 6097

How to style a png icon with CSS?

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?

Upvotes: 1

Views: 12983

Answers (1)

sheriffderek
sheriffderek

Reputation: 9043

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;
}

Upvotes: 1

Related Questions