transitioning from font-awesome v4 to the latest version, v5

For a while now, I have been utilizing a responsive template. However, I am interested in updating its fa-module from v4 to v5. By downloading the free web package, replacing "font-awesome.min.css" with "all.min.css", and adjusting all references to the new font folder, I can now utilize all the new fa-icons with 

"<span class="fa fa-..."></span>"
(or far, fas, fab prefixed), which is great.

Despite this success, I am having trouble using v5 icons with additional styles such as class="icon ..." or class="feature ...". Only the v5 solid family appears when I explicitly set 
.icon:before { ... font-weight: 900; ... }
or 
.feature:before { ... font-weight: 900; ... }
. Icons from the other 2 families display as square boxes showing the icon's hex code only.
If I set a weight of "400", only icons from the v5 regular family are displayed and the solid ones show up as squares with hex codes. Regardless of the weight I specify, the v5 brands family icons never appear.
How can I access icons from the brands family or from all 3 families equally?
Any hints or suggestions would be greatly appreciated...

htmlcssclassfont-awesomeresponsive

Answer №1

To make use of different Font Awesome icons, you must specify the Font Awesome family just like choosing between Arial and Times for displaying text on your website.

In your code snippet, include the following:

.icon:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f007";
}

The appearance variations in Font Awesome are achieved through a combination of font-family and font-weight.

If you are using the free version of Font Awesome, it only includes the "solid" and "Brands" styles with weights 900 and 400 respectively. The additional features you desire are part of the Pro version.

https://i.sstatic.net/QhD5R.png

Refer to FA's Documentation for more information on this topic.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Applying ngClass to handle positive and negative numbers and adjust color in Ionic/Capacitor

I have data from my API that includes price and percentage data. I want to display negative numbers in red, and zero or positive numbers in green. After exploring Angular documentation, I found that ngStyle and ngClass can be used for this purpose. I chose ...

androidhtmlcssangularionic-framework

"Ensuring Consistency: Addressing the Conflict between CSS and Font

I'm encountering a "mixed content" error on my website caused by one font being loaded via HTTP. The font is referenced in a CSS file like this: @font-face { font-family: 'fontXYZ'; src: url('../font/fontXYZ.eot'); src: url ...

htmlcsswebpack

Integrating information from various sources to create a cohesive online platform

I am looking to incorporate data from various sources into a single web page: Social networks (Facebook, Twitter, LinkedIn, etc.) RSS feeds Article meta tags (particularly OpenGraph and Twitter cards) This data may change dynamically based on user inter ...

javascripthtmlfrontend

Transforming the DOM using jQuery

I am looking to manipulate the DOM using jQuery. This is the initial source code: <td class="name"><a href="position_details.php?x=-109&amp;y=95">21</a> </td> <td class="name"><a href="position_details.php?x=-109& ...

javascriptjqueryhtml

Achieving vertical alignment of form controls with labels that wrap in a row using Bootstrap 4

I am facing an issue where input elements in a row with labels above them are causing alignment problems when the screen width is reduced. The longer labels wrap to the next line and push the input element down, increasing the overall height of the row: h ...

htmlcsstwitter-bootstrapbootstrap-4

What could be causing the bootstrap columns to automatically shift onto separate lines?

Check out my code snippet: html, body { width: 100%; height: 100%; margin: 0; padding: 0; overflow-x: hidden; } .row { width: 100%; height: 80%; margin: 0px; padding: 0px; } body { background: #EFEFEF; } .container-fluid { wid ...

htmlcsstwitter-bootstrapbootstrap-5

What is the best way to split strings in an input field?

My task is to create a form with an input field and a dropdown list containing options for Checkbox and Radio. The user should enter text in the input field and select a type from the dropdown. For example: Input field: One, Two, Three Radio The expecte ...

javascripthtmlstringinput

Transferring data from a React file to a plain HTML page

What is the best way to transfer information from a React app to a static HTML file? For instance, if I collect data through a form in a React app.js file, how can I then send that data to a basic HTML file? ...

javascripthtmlreactjs

Place a written message on an picture

<head> <style> .relative{position:relative; width:600px;} .absolute-text{position:absolute; bottom:1; font-size:12px; font-family:"vedana"; background:rgba(251,251,251,0.5); padding:10px 20px; width:10%; text-align:center;} </style> < ...

htmlcsscss-position

Troubleshooting problem with static divs not scrolling properly within an iframe on iOS devices

I'm encountering an issue with iOS scrolling on my iPad. All other platforms I've tested work perfectly fine except for this one. While I have a love-hate relationship with iOS, I managed to make the entire iframe content scroll within the parent ...

ioshtmlcss

Encountering error E418 when attempting to set up fontawesome with angular cli 6.0.5 installation

Upon running the command 'npm install --save @fortawesome/fontawesome-free-regular' on my Windows machine, I encountered error code E418 - I'm a teapot: @fortawesome-free-regular@latest. Environment: Angular CLI: 6.0.5, Node: 8.9.1, OS: wi ...

angularfont-awesome

I aim to arrange three div elements in a single row with varying widths - placing one on the left, another in the center, and the last

I am trying to have three div elements in one row with different widths - one on the left, one in the center and one on the right. The left div should be 160px The center div should be 640px The right div should be 160px My goal is for them to appear se ...

csshtml

What is the purpose of the c() function in JavaScript?

I recently stumbled upon some interesting JavaScript code in the source of a web page: function fsb329142055() { var b=new Array(57,50,102,50,52,99,50,53,52,56,102,98,102,98,101,102,101,49,53,61,101,99,110,57,111,78,109,54,114,111,56,48,102,38,1 ...

javascripthtmlforms

Unlimited scrolling feature on a pre-filled div container

Looking for a way to implement infinite scroll on a div with a large amount of data but struggling to find the right solution? I've tried various jQuery scripts like JScroll, MetaFizzy Infinite Scroll, and more that I found through Google search. Whi ...

javascriptjqueryhtmlpaginationinfinite-scroll

When mousing over a subitem of the Image menu, ensure that the Image menu

Is there a way to prevent the image menu from reverting back to its original image when hovering over its subitems? I have 5 navigation menu items, but only one has a dropdown. Whenever I hover on the subitems of About Us, the image for About Us changes ba ...

htmlcssmenu

What is the process of uploading a video and showcasing it on an HTML page?

I have successfully uploaded images and displayed them on an HTML page. Now, I am looking to do the same for videos. Here is my current code: $('#addPhotosBtn').click(function() { $(this).parents().find('#addPhotosInput').click(); }) ...

javascripthtmljquerycss

Is it possible to utilize AngularJS ngAnimate to perform cross-fading transitions on list items?

I am currently exploring the ins and outs of angularJS with my simple message ticker example. This ticker displays messages by toggling the CSS display property of one of the li elements. <div id="ngtickerMessage" class="ngtickerMessage"> ...

cssangularjshtml-listsng-animate

Help me understand how to display the data in a JSON array

{ "entries": [ { "id": 23931763, "url": "http://www.dailymile.com/entries/23931763", "at": "2013-07-15T21:05:39Z", "message": "I ran 3 miles and walked 2 miles today.", "comments": [], "likes": [], ...

javascriptjqueryhtmljsonjsonp

Inject an HTML or jade webpage into a div within another HTML or jade webpage

I'm facing an issue in my Node.js project with a script (JS) that is responsible for loading a Jade page into a div of another Jade page using $("#div").load(directory). Despite specifying the directory of the jade page to be loaded, I keep getting an ...

javascripthtmlnode.jsexpresspug

Can you provide instructions on connecting a navigation bar button to a sidebar that appears when clicked?

On my webpage, I have three buttons at the top. One of them, the Contact Me button, is supposed to reveal a hidden sidebar on the left side when clicked. However, I am having trouble getting the sidebar to appear when clicking Contact Me. An example of wh ...

jqueryhtmlcss