The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Scaling inline svg icon inside a css pseudo-element

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #244857

    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.


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

    See this on Stack Overflow –


    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.


Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.