In Font Awesome 5 it can be done using pure CSS as in some of the above answers with some modifications.
include link to Font Awesome:
<link rel="stylesheet" href="../css/fontawesome-all.min.css">
and I'll use html as follows without a separate class for `ul` and `li` for simplicity.
<ul>
<li>Lists</li>
<li>Buttons</li>
<li>Button groups</li>
<li>Navigation</li>
<li>Prepended form inputs</li>
</ul>
CSS
ul {
list-style-type: none;
}
li:before {
position: absolute;
font-family: 'Font Awesome 5 free';
/* Use the Name of the Font Awesome free font, e.g.:
- 'Font Awesome 5 Free' for Regular and Solid symbols;
- 'Font Awesome 5 Brand' for Brands symbols.
- 'Font Awesome 5 Pro' for Regular and Solid symbols (Professional License);
*/
content: "\f1fc"; /* Unicode value of the icon to use: */
font-weight: 900; /* This is important, change the value according to the font family name
used above. See the link below */
color: red;
}
Without the correct font-weight, it will only show a blank square.
https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements#define
In Font Awesome 5 it can be done using pure CSS as in some of the above answers with some modifications.
ul {
list-style-type: none;
}
li:before {
position: absolute;
font-family: 'Font Awesome 5 free';
/* Use the Name of the Font Awesome free font, e.g.:
- 'Font Awesome 5 Free' for Regular and Solid symbols;
- 'Font Awesome 5 Brand' for Brands symbols.
- 'Font Awesome 5 Pro' for Regular and Solid symbols (Professional License);
*/
content: "\f1fc"; /* Unicode value of the icon to use: */
font-weight: 900; /* This is important, change the value according to the font family name
used above. See the link below */
color: red;
}
Without the correct font-weight, it will only show a blank square.
https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements#define
