I can’t get my font-awesome icons to show up. Tried importing css with multiple methods

by

You need to use the fas class and the pencil one will not show because it belong to the PRO package1 (https://fontawesome.com/icons/pencil?style=solid)

ul a {
  text-decoration:none;
  font-size:25px;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<ul class="special">
  <li><i class="fas fa-pencil" title="Edit"></i></li>
  <li><a href="#" class="fas fa-search"><span class="label">Magnifier</span></a></li>
  <li><a href="#" class="fas fa-tablet"><span class="label">Tablet</span></a></li>
  <li><a href="#" class="fas fa-flask"><span class="label">Flask</span></a></li>
  <li><a href="#" class="fas fa-cog"><span class="label">Cog?</span></a></li>
</ul>

You cannot use the regular version of these icons far because all of them belong to the PRO package2 so they won’t show

ul a {
  text-decoration:none;
  font-size:25px;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<ul class="special">
  <li><i class="far fa-pencil" title="Edit"></i></li>
  <li><a href="#" class="far fa-search"><span class="label">Magnifier</span></a></li>
  <li><a href="#" class="far fa-tablet"><span class="label">Tablet</span></a></li>
  <li><a href="#" class="far fa-flask"><span class="label">Flask</span></a></li>
  <li><a href="#" class="far fa-cog"><span class="label">Cog?</span></a></li>
</ul>

https://fontawesome.com/icons/tablet?style=regular

https://fontawesome.com/icons/search?style=regular

https://fontawesome.com/icons/flask?style=regular

https://fontawesome.com/icons/cog?style=regular

1 As you can see below, all the versions of this icon are PRO so there is no way to use this icon with the Free package:

enter image description here

2 As you can see below, only the solid version isn’t PRO so only this one is included in the Free package unlike the 2 others.

enter image description here

Related questions:

Font Awesome 5 on pseudo elements shows square instead of icon

Font Awesome 5 Choosing the correct font-family in pseudo-elements

More Related Contents:

  1. Font Awesome 5 on pseudo elements shows square instead of icon
  2. Li item on two lines. Second line has no margin
  3. How to center text vertically with a large font-awesome icon?
  4. Use Font Awesome icon as CSS content
  5. Font Awesome icon inside text input element
  6. How do I add a Font Awesome icon to input field?
  7. Font Awesome icons are not working, I have included all required files [closed]
  8. Font awesome is not showing icon
  9. How to change the inner white color of Font Awesome’s exclamation triangle icon?
  10. Can I change the color of Font Awesome’s cog icon?
  11. How to vertically align text with icon font?
  12. Font Awesome & Unicode
  13. Menu does not align correctly in Safari
  14. Bootstrap full-width with 2 different backgrounds (and 2 columns)
  15. How can I expand floated child div’s height to parent’s height?
  16. Minimum and maximum value of z-index?
  17. Is it possible to put CSS @media rules inline?
  18. Adding HTML entities using CSS content
  19. How can I find an element by CSS class with XPath?
  20. Should I use px or rem value units in my CSS? [closed]
  21. Using flex order property to re-arrange items for desktop and mobile views
  22. What characters can be used for up/down triangle (arrow without stem) for display in HTML?
  23. How can I make a display:flex container expand horizontally with its wrapped contents?
  24. Align labels in form next to input
  25. CSS table-cell equal width
  26. Get rid of space underneath inline-block image [duplicate]
  27. How to make div’s percentage width relative to parent div and not viewport
  28. How to apply an opacity without affecting a child element with html/css?
  29. Fixed Header, Footer, and Sidebars with scrolling content area in center
  30. Why does a border increase the element’s width?

Leave a Comment