Scaling inline svg icon inside a css pseudo-element

[anita]

I feel as though I’ve read every inline SVG/css article around, and I still can’t get the result I would like.

• I would like icons to be triggered by classes on html elements thus:
  <p class="info-icon">some information text</p>. I have had this working for a long time with icon fonts, and changing to svg has been straight forward.
• I want to change the colour of my icons, but I am happy with single colour only.
  The class above will always be the same colour, and I can set it in css.

.info-icon {@include icon('info', blue)}

• I would like to be able to specify the size of an icon
  .info-icon (@include icon('info', blue, $size:18px)}
  It is sizing/scaling the icon that I cannot seem to do.

Here is a codepen illustrating what I have tried/am trying.

The icon definitions are at the end of the scss.

As you can see icons appear and can change colours – however scaling smaller results in clipping and scaling larger makes no difference.

Most of the code for generating the inline svg came from somewhere I can’t locate right now. Other parts are pieces I’ve been using for a long time.
The icons are font-awesome, via the ico-moon app.

[Paulie_D]

You can’t size an image inside the pseudo-element content property,

See this on Stack Overflow – http://stackoverflow.com/questions/8977957/can-i-change-the-height-of-an-image-in-css-before-after-pseudo-elements

[anita]

Thanks Paulie_D.

The message of the Stack Overflow post seems to be
” Can you style generated content? The answer is: No, you can’t.” and
“Generated content is rendered into a generated box, and you can style that box, but not the content”. It is an answer from the css perspective.

But my question is an svg question: as I am generating the content can I create content of a different size?

I can change the viewport and viewbox of my SVG. The svg scales if I view it standalone, but not when it is part of the pseudo-element.

Oh well, I’ll explore other ways of using svg icons and scaling.
thank you.

I

[Author]

Posts