CODEWITHSUNDEEP
htmlcssfont-awesome
sdvnksv
sdvnksv

Reputation: 9678

Font Awesome in CSS content not rendering on mobile

Here is a basic example of Font Awesome integration as a CSS content pseudo element:

ul {
  list-style: none;
}
li:before {
  content: '\f105';
  font-family: 'FontAwesome';
  margin-right: 1rem;
}
<ul>
  <li>Item</li>
  <li>Another item</li>
  <li>Yet another item</li>
</ul>

External URL to test: https://jsfiddle.net/1zknmxLg/2/

Everything works as it used to work with previous version of Font Awesome, however this one doesn't render the icons on any mobile phone (tested on iPhone 7 and latest Android). Why is this?

Upvotes: 4

Views: 3801

Answers (2)

sdvnksv
sdvnksv

Reputation: 9678

After going through the documentation, the correct usage is:

li:after {
    content: '\f105';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}

If you used a paid (pro) version, replace Free by Pro (or Brand). font-weight: 900; stands for solid icons.

Upvotes: 9

Athul Nath
Athul Nath

Reputation: 2606

Try this font-family: Font Awesome\ 5 Free;

ul {
  list-style: none;
}
li:before {
  content: "\f105";
  font-family: Font Awesome\ 5 Free;
  margin-right: 1rem;
}
li {
	font-weight: 900;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">
<ul>
  <li>Item</li>
  <li>Another item</li>
  <li>Yet another item</li>
</ul>

Upvotes: 2

Related Questions