1

I've seen countless snippets like this one, to include a font as a "background image":

div 
{
    width : 100%;
    height : 200px;
    margin : 20px;
    background-color : grey;
    color : #fff;
    position : relative;
}

div:before
{
      position:absolute;
        font-family: FontAwesome;
        top:0;
        left:0px;
      font-size : 100px;
      content: "\f003";
}

JSFiddle

Result:

enter image description here

Is there a way to make the font resize dynamically to fill 100% size as a background image, similar to any of the methods used here? Or is there any way I can use it properly as a background image in a responsive page, where I wouldn't know the width/height of the container it's going to fill?

I'm thinking of using transforms: Css, Can I stretch text? But in my case it's difficult because I don't know how much I have to scale it.

I thought I'd ask this question because maybe there's a way to do it, prior to just falling back to a plain old background image.

Additional links that didn't help (much):

Community
  • 1
  • 1
David
  • 15,652
  • 26
  • 115
  • 156
  • So you want the icon to change its size depending on the size of the div? – nowhere Sep 30 '15 at 09:06
  • I want the icon to fill the div. Like `background-size:cover;` – David Sep 30 '15 at 09:10
  • 1
    @David Its better to use `svg` if you're not sure of `height` `width` as *font-awesome* is not something which you can manage with `background-size: cover` its has to be manageable with `font-size` then instead of that you can go for `svg` viz best suited as you're looking for icons to fill whatever size you want as `background-image`. – vivekkupadhyay Sep 30 '15 at 09:10
  • Well, why don't you try calculate font-size with JavaScript. Alternatively, there's `vw` unit for font size, which adjust to viewport width. – kamil Sep 30 '15 at 09:12
  • Figured as much. I'm just going to use https://github.com/encharm/Font-Awesome-SVG-PNG – David Sep 30 '15 at 09:13
  • Here I have a similar question. It has no solution, but the scaling works in both directions for font. Not working for font-awesome but I have a feeling that this is just due to my misunderstanding something to do with DOM, or with font-awesome's default styling. Maybe we can work it out together :P. https://stackoverflow.com/questions/47181524/vanilla-js-resize-font-awesome-to-fit-container – Muckee Nov 08 '17 at 21:47

0 Answers0