How can I customize the styling of an SVG pseudo element using Font Awesome 5?

I've implemented font awesome 5 pseudo elements to attach an :after tag to my element as shown below:

&:after {
    content: "\f068";
    font-weight:400;
    color:$brandRed;
    float:right;
    font-family: "Font Awesome 5 Pro"; 
}

The content is being added correctly, but the styling I applied like float:right does not reflect on the generated SVG from font awesome.

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

As seen in the image above, while the SVG element loads correctly, the :after tag with float:right styling remains unapplied to the SVG. Why doesn't it carry over?

Even though the documentation suggests adding stylings along with the content, it seems those stylings don't transfer over as expected.

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

Why are the stylings failing to be applied properly?

javascriptcssfont-awesomepseudo-elementfont-awesome-5

Answer №1

Using the JS version with the pseudo-element technique in Font Awesome results in only the icon-related properties being used to generate the SVG (such as content, font-family, font-weight, etc), rendering the pseudo-element ineffective. To address this, you must include display:none on the pseudo element as stated in the documentation:

Hide Pseudo Elements by setting display to none

As the JS automatically inserts icons into your page’s DOM based on each icon reference (utilizing your pseudo element styling), it is necessary to hide the actual CSS-created pseudo element that gets rendered.reference

If you want to apply properties like float, they should be applied to the generated SVG rather than the pseudo element. Hence, target the SVG directly:

span:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f007";
  /*display:none; I commented this mandatory property to see what is happening */ 
  color:red; /* will do nothing*/
  float:right; /* will do nothing*/
}


/*target the svg for styling*/
.target-svg svg {
  color: blue;
  float:right;
}
<script data-search-pseudo-elements src="https://use.fontawesome.com/releases/v5.8.1/js/all.js"></script>
<span class="target-svg">the icons is on the right --></span>
<br>
<span>the icons will not be styled</span>

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

what's causing the tabs in bootstrap to malfunction

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="http://maxcdn.bootstrapcdn.com/bootst ...

javascriptjqueryhtmlcsstwitter-bootstrap

React - group several elements within a wrapping container

I am dealing with an array of words that make up sentences: let words = [ { "start_time": "2.54", "end_time": "3.28", "alternatives": [ { "confidence": "1.0", ...

javascriptreactjs

What causes certain event handlers to be activated when using dispatchEvent, while others remain inactive?

When it comes to event-based JS, there are two main APIs to consider: event listeners and event handlers. Event listeners can be registered using addEventListener, while event handlers are typically registered with an API similar to target.onfoobar = (ev) ...

javascripteventsbrowserdom-events

Maintain GoogleMaps map object across different views in AngularJS

I have made the decision to utilize the AngularUI Map plugin for displaying Google Maps within a specific view. Here is how the template is structured: <div id="map"> <div ui-map="map" ui-options="mapOptions" id="map-canvas" ui-event="{&apo ...

javascriptgoogle-mapsangularjsangularjs-directiveangular-ui

Show each text field individually in JavaScript

Is it possible to display text fields one by one upon button click? Initially, all text fields are hidden, but when the button is clicked, they should be displayed one after another with their visibility property set to visible? This is what I have attemp ...

javascriptjqueryajax

Sort the DOM elements in jQuery based on their CSS color property

Displayed on the page below is a list of usernames in a random order. I'm looking to sort them using jQuery in the following sequence: red blue green purple black This is my current progress: <script type="text/javascript"> $(function() { ...

jquerycsssortingcolors

Trigger is not activated by dynamically created element

I am dealing with a block of code that is dynamic and looks like this. var li3 = document.createElement('li'); li3.classList.add("col-sm-3"); li3.classList.add("no_padding"); var inner = ""; inner = inner ...

javascriptjquery

What is the reason for labels appearing inside select boxes?

Can someone help me understand why my select box label is displaying inside the select box? For example, when I am not using react-material-validator it looks like this: https://codesandbox.io/s/5vr4xp8854 When I try to validate my select box using the r ...

javascriptreactjsvalidationmaterial-designmaterial-ui

Trouble with Displaying Table Outside of Div in Internet Explorer

As a UI developer, I encountered an issue where the table inside two divs is not displaying correctly in IE8. It works seamlessly in Firefox, but IE is causing me headache. If anyone has any suggestions or advice on how to fix this, please help me out. Yo ...

htmlcssinternet-explorerhtml-table

Exploring the possibilities of utilizing React server components in my project

I am interested in experimenting with the new React API for making server-side component calls. However, I am unable to find any information on how to begin a project using server components. In an example of source code that I stumbled upon, it mentioned ...

javascriptreactjsserver

Ensuring the Persistence of Column State in Material-UI DataGrid/DataGridPro when Adjusting Visibility Using Column Toolbar

We have integrated MUI DataGrid into our React project. Currently, I am exploring options to save the state of columns after toggling their visibility using the DataGrid toolbar column menu. After each re-render, the column setup returns to its default st ...

javascriptreactjsmaterial-uidatagrid

Looping through an array

I have created an array as shown below: iArray = [true, true, false, false, false, false, false, false, true, true, true, false, true, false, false, false, false, true] Condition check: If any value in this array is false, I will display an error messag ...

javascriptjqueryarrays

SSE and the power of NodeJS through Express

Having trouble receiving SSE events in the browser. This is the server-side code (using Express): app.all('/callme', function(req, res){ res.writeHead(200, { 'Connection': 'keep-alive', 'Content-Type&apo ...

javascriptnode.js

Call getElementById upon the successful completion of an AJAX request

In the process of constructing a mini quiz, I am utilizing a variable quizScore to store the score. Each question in the quiz is displayed using AJAX. An individual AJAX call captures the ID of the button pressed (for example, on question 2, the button ID ...

javascriptajax

Style formatting is applied to the addition of fresh content on a webpage

As I develop a front end page that pulls data from multiple sources, my goal is to allow for dynamic addition of new sources without the need for code changes. This includes the ability to add new source URLs on the fly. Additionally, certain data sources ...

htmlcss

Firebase Error: In order to deploy without hosting via source, options must be provided. (app/no-options)

After developing a Next.js application, I integrated Firebase authentication and utilized the useContext hook for managing user state throughout the app. Here's the snippet of code for the AuthContext: auth.js import { createContext, useState, useEff ...

javascriptfirebasenext.jsfirebase-authenticationreact-context

What are the steps to create an endless scrolling feature?

I'm trying to create a slider with a horizontal scrolling effect, but I've hit a roadblock. How can I make the slider scroll infinitely? In my code, you can see that after Item 6, it stops scrolling and I have to scroll backward. However, I want ...

javascripthtmljquerycss

What is the best way to position an image using css?

I am looking to position an image on the left side of my homepage using CSS instead of HTML. However, I am having trouble figuring out how to make it work. The image I want to use is called Nobullying.jpg. HTML: <html> <head> <link re ...

htmlcss

Node(Meteor) experiencing a memory leak due to setTimeout

I have encountered an unusual memory leak associated with the use of setTimeout. Every 15 seconds, I execute the following code using an async function that returns an array of promises (Promise.all). The code is supposed to run again 15 seconds after all ...

javascriptnode.jsmeteormemory-leakssettimeout

Django and VueJS: Error 403 - Forbidden request due to missing or incorrect CSRF token

My tech stack includes Django and Django REST framework on the backend, along with Vue.js on the frontend. While GET requests function smoothly and POST requests using Postman or Insomnia work fine, encountering an error in the Browser console when sending ...

javascriptpythondjangovue.jscsrf