Scary Scary - 29 days ago 9
CSS Question

font awesome only changes font-size in html, not css

<i class="fa fa-graduation-cap" aria-hidden="true" style="font-size: 50px;"></i>


works

.fa-graduation-cap {
margin-top: 38px;
color: #E46A6B;
font-size: 50px;
}


doesnt work

I've never had this issue before. Any idea?

Yes, I do have the font-awesome css correctly linked.

Answer

I believe the font-size is already defined for the icons in the font-awesome.css file. Adding the style tag to the html code overrides these predefined classes. Try typing !important after defining font-size in the css to explicitly override. For example:

.fa-graduation-cap {
  margin-top: 38px;
  color: #E46A6B;
  font-size: 50px !important;
}

Like @developernator stated, you can also use the predefined classes. However, I find that most of the time the right size falls between the sizes of these classes.

Comments