1

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?

Kyle Pennell
  • 5,747
  • 4
  • 52
  • 75
  • if you mean, shadows, color, stroke, then svg will be fine, else you only have the img tag to style – G-Cyrillus Mar 28 '15 at 21:46
  • What styles were you thinking of? Image files generally aren't stylable but it depends on what you're trying to do as to whether there might be something. – Paulie_D Mar 28 '15 at 21:46
  • How do you want to style it? E.g. apply a circle around? A shadow? Change the color of arrow? – nicael Mar 28 '15 at 21:46
  • 1
    Thanks, everyone. I guess @sheriffderek is right here. I need to figure out how to get it into an svg file – Kyle Pennell Mar 28 '15 at 21:55
  • 1
    @KylePennell - I added some clearer examples for ya. Inkscape is a free vector drawing app. Might want to check that out. – sheriffderek Mar 28 '15 at 22:15
  • See http://stackoverflow.com/questions/7415872/change-color-of-png-image-via-css for some options. – Jongware Mar 29 '15 at 10:57

1 Answers1

1

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;
}
Community
  • 1
  • 1
sheriffderek
  • 8,848
  • 6
  • 43
  • 70