3

I am using FontAwesome icons on my webpage. The height and width of the div, which contains the icon, is based on user input. I want the icon to fit inside div as the div height and width changes. I also want to center the icon inside that div. There is very limited information regarding this on the web.

Can I get/set font-height or font-width via font-size? Any relation between font-size and font-height/width?

Akshay Shinde
  • 141
  • 3
  • 16
  • I am trying a few things and I found a way to reduce the width of the tag in font awesome. But it only happens after the page is loaded in the developer tools and not via JavaScript. Any way it could be done using JavaScript. – Akshay Shinde May 25 '15 at 14:39

1 Answers1

4

FontAwesome Icons are inside a font, so you set their size with font-size.

You can do that with jQuery like this: $('.icon').css('font-size', 100);

Rudi
  • 2,987
  • 1
  • 12
  • 18
  • 1
    I want to manipulate font-width and height and not font-size. – Akshay Shinde May 25 '15 at 14:26
  • They are defined through font-size – Rudi May 25 '15 at 14:27
  • yes, but is there any relation like if x is font-size x*y is font-width? I want to manipulate the width because the icons are going out of their parent. – Akshay Shinde May 25 '15 at 14:37
  • I am trying a few things and I found a way to reduce the width of the tag in font awesome. But it only happens after the page is loaded in the developer tools and not via javascript – Akshay Shinde May 25 '15 at 14:38
  • I think you can only manipulate the font width with `font-stretch`, but that doesn't accept numeric values. Maybe you should look into using SVG icons instead of font icons. – Rudi May 25 '15 at 14:55