How can I change font size while using font awesome?

Question

So I have started a personal resume site and I stumbled across something really cool: font awesome, which provides graphics in the form of text allowing you to add font effects to it through CSS. My issue is everything was gong fine until I tried to change the font size, for whatever reason it just won't change. Do you have any ideas? I am also newer here and I have read through how to make posts but if I am doing it wrong please let me know.

*{
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
}

.toggle_menu{
    position: fixed;
    padding: 15px 20px 15px 15px;
    margin-top: 70px;
    color: white;
    cursor: pointer;
    background-color: #648B79;
    z-index: 1000000;
    font-size: 8em;
}    

<!DOCTYPE html>
<html>
<head>
    <!-- Stylesheets -->
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <!-- Fonts -->
    <link href='https://fonts.googleapis.com/css?
family=Open+Sans:400,600,700,800,300' rel='stylesheet' type='text/css'>
    <!-- Scripts -->
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="js/menu.js"></script>
    <script src="https://use.fontawesome.com/53686df37f.js"></script>
    <title>Joseph Kuzera</title>
</head>
<body>
    <i class="fa fa-bars toggle_menu"></i>
</body>
</html>

Possible duplicate of [How to style icon color, size, and shadow of Font Awesome Icons](http://stackoverflow.com/questions/12272372/how-to-style-icon-color-size-and-shadow-of-font-awesome-icons) — TylerH, Apr 14 '17 at 20:53

yaakov · Answer 1 · 2018-12-23T04:04:28.143

5

The icons are made by :before psuedoelements on the .fa, so if you targeted the :before instead of the .fa it would get straight to the icon:

.toggle_menu{
  position: fixed;
  padding: 15px 20px 15px 15px;
  margin-top: 70px;
  color: white;
  cursor: pointer;
  background-color: #648B79;
  z-index: 1000000;
}
.toggle_menu:before {
  font-size: 8em;
}

edited Dec 23 '18 at 04:04

answered Apr 13 '17 at 22:24

yaakov

4,568
4
27
51

1

No upvote nothing?, this should be accepted answer, as this answer what exactly op ask – user2860957 Sep 07 '17 at 00:45

Zak · Accepted Answer · 2019-11-26T19:26:47.500

2

That is not the preferred way of sizing font-awesome icons .. I am not sure it can be done with font-size either. Per the font-awesome example page:

<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x

http://fontawesome.io/examples/

Font-Awesome has pre-fabricated classes that are built in containing the font-size attribute. No need to write custom CSS to overwrite the font size of the icon. Simply use the built in classes.

edited Nov 26 '19 at 19:26

answered Apr 13 '17 at 21:59

Zak

6,976
2
26
48

Thank you this was very helpful – 404Developer Apr 13 '17 at 22:03
1

font-awesome icons can be sized by simply using font-size - it's a FONT, not graphics. Using the built-in classes just applies that via a class. Also, unless you're using huge amounts of FA-icons, just adding the needed icons, instead of the full CSS will help. The total needed for FA to work is about 10 lines of CSS, plus the fontawesome font-loader, and each class with content:. – junkfoodjunkie Apr 13 '17 at 22:07

score 0 · Answer 3 · answered Apr 13 '17 at 22:06

That is one way to re-size the fonts. However, what if none of those sizes have what you want? then you do need to use font-size.

The reason your font size isn't rendering is because the .fa class has a font-size:inherit; on it. That's why it's being overwritten.http://jsfiddle.net/1Lf0rowp/43/

However, the above code is more efficient because they have built in font-sizes to handle with the classes.

How can I change font size while using font awesome?

3 Answers3