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.

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

Issue Encountered While Trying to Upload File Using Ajax

I have been encountering an issue with uploading a file using Ajax. My goal is to upload a single file only. Below are the snippets of code that I have utilized. HTML & Ajax $(document).ready(function(){ $("input:submit").on('click', func ...

phpjqueryhtmlajax

Changing Background Images Based on Screen Size in CSS Media Queries

Hey there, I am currently using two different header images - one for desktop and another for both tablet and mobile devices. I am wondering how I can automatically switch from the desktop header image to the mobile/tablet header image when the screen siz ...

htmlcssresponsive-designmedia-queries

floating containers aligned side by side in a perfectly positioned parent container

I'm currently working on aligning a set of buttons within a DIV popup that I've created. My goal is to have the buttons positioned next to each other, but I'm having trouble achieving this. I've attempted using 'float: left', ...

htmlcss

What are the recommended margins for various alphabets?

When displaying text, some alphabets take up more space than others. So how can I adjust the white space between elements '#re1' and '#re2' automatically in the scenario described below? In this code snippet, what is the best way to ad ...

javascripthtmlcss

The tooltip function is not functioning properly on Internet Explorer when the button is disabled

I have been utilizing a similar solution found at http://jsfiddle.net/cSSUA/209/ to add tooltips to disabled buttons. However, I am encountering an issue specifically in Internet Explorer (IE11). The workaround involves wrapping the button within a span: ...

javascriptjqueryhtmlcss

Customize WPBakery Accordion Background Color

I'm currently using WPBakery's Accordion section, version 5.4.7, to showcase a Gravity Form. I am attempting to modify the background color of the active accordion section to black. After exploring various forum examples, I have attempted to add ...

csswordpressaccordionbackground-colorvisual-composer

Django - issue with table display showing empty row due to query set

In my project, I have two models: one named Season and the other one named Game: # Season class Season(models.Model): teams = models.ManyToManyField('Team', related_name='season_teams', blank=True) current = models.BooleanF ...

pythonhtmlcssdjangosass

Full-screen modal fade not functioning properly

I am trying to implement multiple fullscreen modals on a single page, but I am facing an issue where they slide in and out at an angle instead of just fading in and out. I have been unable to achieve the desired effect of a simple fade transition. If you ...

javascripthtmlcssmodal-dialog

What causes absolute positioning to separate each word onto its own line? Is there a solution to this issue?

Why does each word in a child element (class .second) get wrapped onto a new line when using absolute positioning? Is there a way to keep the parent element (class .first) as a round shape, while also ensuring the child element is centered below it and has ...

htmlcsslayout

Load Bootstrap 4 Modal with Ajax

I recently upgraded from Bootstrap 3 to Bootstrap 4.1 Within my applications, I utilize ajax loaded modals. In the layout, I have: <div class="modal fade" id="myModalToFillInfo" tabindex="-1" role="dialog" aria-labelledby="myModalToFillInfoLabel" ari ...

javascriptjqueryhtmlajaxbootstrap-4

CSS: Problem Arising from Line Connections Between Tree Elements

I'm currently working on connecting tree nodes with lines in a drawing. I've managed to achieve it to some extent, but there are a few issues like dangling lines that I need to fix. You can find the implementation on codepen here: https://codepe ...

javascripthtmlcssvue.jssass

"Enhancing User Experience with AngularJS by Dynamically Modifying and Refresh

I'm currently attempting to dynamically add HTML elements using JavaScript with a directive: document.getElementsByClassName("day-grid")[0].innerHTML = "<div ng-uc-day-event></div>"; or var ele = document.createElement("div"); ele.setAttr ...

javascripthtmlangularjs

What is the best way to fetch values from individual buttons using PHP?

<form action="posts-ayarlar.php" method="POST" id="demo-form2" data-parsley-validate class="form-horizontal form-label-left"> <table class="table table-striped table-bordered" ...

javascriptphphtml

Is there a way for me to conceal my table upon clicking on the sidebar? Additionally, when I click on a button to display a different table, can the currently visible table automatically close?

I have a unique table for each button. Initially, the tables are hidden using CSS visibility: 'hidden', and when I click a button, the corresponding table displays. However, the issue arises when I click the same button again as it fails to hide ...

javascripthtmljquerycssshow-hide

How to find and pair up custom data attributes that are unfamiliar?

Is there a method to select elements with unspecified custom data attributes? When I say unspecified, I am referring to an element that could appear like this: <div data-unknown="foo"></div> or <td data-someOtherCustomDataAttribute="bar"& ...

htmlcsscss-selectors

Personalizing CSS for a large user base

My website allows users to choose themes, customize background, text, and more. I am seeking the best method to save all of these changes. Is it preferable to use a database read or a file read for this purpose? Any recommendations are greatly appreciate ...

csscustomization

Retrieve a result following an AJAX post request to utilize the obtained value in subsequent code functionalities

Below is the code snippet where an "if" statement is used to check if a query has been executed correctly. If it has, a part of the script is stored in a variable called $output. This variable is then immediately read by the notification script included in ...

javascriptphpjqueryhtmlajax

Simultaneously scrolling left and fading in with jQuery

I've come across this code that works well in scrolling my divs to the left. However, I'm looking to add a fading effect while they are scrolling. Is there a way to achieve this? $('div#line1').delay(1000).show("slide", { direction: "r ...

jquerycssjquery-ui

What is the process for applying cdkDropList to the tbody when using mat-table instead of a traditional HTML table?

I have been experimenting with the mat-table component in my Angular project, following a simple example from the documentation: <table mat-table [dataSource]="dataSource" class="mat-elevation-z8"> <!--- These columns can be ...

htmlangulartypescriptmat-tableangular-cdk-drag-drop

Trigger the scrolling of one div when another div is scrolled

Link to Jsfiddle I'm attempting to activate my current scroll while I am outside that scroll, specifically in #DivDet Here is the code snippet of what I have tried so far: $("div#DivDet").scroll(function () { // Still trying to figure out what ...

javascriptjquerycsshtml