Exploring Font-Awesome 5: Using CSS Pseudo-elements to Mirror or Rotate Icons

I am utilizing CSS pseudo elements to display icons (jsfiddle)

body {
    font-family: Arial;
    font-size: 13px;
}

a {
    text-decoration: none;
    color: #515151;
}

a:before {
   font-family: "Font Awesome 5 Free";
   content: "\f07a";
   display: inline-block;
   padding-right: 3px;
   vertical-align: middle;
   font-weight:900;
}
<link href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" rel="stylesheet"/>
<a href="#">This is a link</a>

Can an icon be rotated or mirrored through this method?

cssfont-awesomefont-awesome-5

Answer №1

To rotate or mirror your icon, you can utilize the transform property.

Take a look at the code snippet provided below:

body {
    font-family: Arial;
    font-size: 13px;
}

a {
    text-decoration: none;
    color: #515151;
}

a:before {
   font-family: "Font Awesome 5 Free";
   content: "\f07a";
   display: inline-block;
   padding-right: 3px;
   vertical-align: middle;
   font-weight:900;
}

a:last-of-type:before {
   font-family: "Font Awesome 5 Free";
   content: "\f07a";
   display: inline-block;
   padding-right: 3px;
   vertical-align: middle;
   font-weight:900;
   transform: rotateY(180deg);
}
<link href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" rel="stylesheet"/>
<a href="#">This is a link</a>
<a href="#">This is a link</a>

Answer №2

To change the orientation of the icon, CSS can be used: transform: rotate(45deg)

Alternatively, to create a mirrored effect, utilize transform: scaleX(-1).

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

Positives and negatives images for accordion menu

I have successfully created an accordion list using HTML, CSS, and JavaScript. However, I would like to enhance it by adding a plus and minus picture in the left corner of the heading. Is there a way to achieve this functionality? I have two images that I ...

javascripthtmlcssaccordion

Determining the decimal width of an element using jQuery

I've been searching everywhere for a method to accurately determine the width of an element without rounding. The reason behind this is that I have multiple elements floated to the left with display inline-block and I am attempting to automatically ad ...

jqueryhtmlcss

The CSS zigzag border functionality seems to be malfunctioning on Internet Explorer

On my clients website, I decided to use a zigzag css border instead of an image for speed purposes. I wanted to have different colors and variations, but I encountered a problem. While my version displayed correctly on Chrome and Firefox using Windows, it ...

cssinternet-explorer

Div element failing to scroll with excessive content

I'm currently working on a modal using Mui Modal and I've encountered an issue. Everything seems to be functioning correctly until I add more items to the cart. When the minHeight exceeds 500, it stops at 100vh and only displays 5 items, even if ...

cssreactjsmaterial-ui

Positioning elements in CSS relative to a specific div container

Looking for advice on how to position two images within a div using percentages relative to the parent div. Check out this fiddle for reference: http://jsfiddle.net/b9ce626s/ I experimented with setting position: absolute; on the image, but it seems to b ...

htmlcss

In a Next JS project, the CSS Transition fails to activate when a class is dynamically added

In my Next.js project with Tailwind styling, I encountered an issue when using the globals.css file for more complex non-Tailwind CSS styling on a component. To better understand the problem, you can view the Code Sandbox here: https://codesandbox.io/p/sa ...

cssreactjsnext.jstailwind-css

How to create a border using a repeated image with spacing between each repetition

Is there a way to create a dashed horizontal line from an image and adjust the spacing between each dash using HTML and CSS? I feel like using javascript for this would be excessive. https://i.sstatic.net/YiD9q.png I'm encountering this issue with t ...

htmlcss

In the production mode, Nuxt styles may not be properly applied

After working on this project for about four months, everything seems fine in the development version. However, once I build the project and upload it to the server, some of my styles are not applied. For more information, I have imported styles both in c ...

cssvue.jsnuxt.jspostcsspostcss-loader

Hide the Modal Content using JavaScript initially, and only reveal it once the Onclick Button is activated. Upon clicking the button, the Modal should then be displayed to

While trying to complete this assignment, I initially attempted to search for JavaScript code that would work. Unfortunately, my first submission resulted in messing up the bootstrap code provided by the professors. They specifically requested us to use Ja ...

javascripthtmlcssbootstrap-4

Unable to utilize a custom function within JQuery

I'm facing an issue with using the function I created. The codes are provided below and I keep encountering a "not a function error." var adjustTransparency = function () { //defining the function if ($(this).css('opacity&apo ...

javascriptjqueryhtmlcss

Could you advise on the best placement for my upcoming JQuery animation?

Here is the code I am currently working with: $(function() { $("button").click(function() { $("#box1").animate({ left: $(window).width() - 800 }, { complete: function() { $("#box1").hide(); } }); $("#box2").a ...

javascripthtmljquerycss

The amazing magnific popup boasts a pair of close buttons

I recently started working on integrating a front-end HTML theme with a back-end Laravel app. Oddly enough, I noticed that the popup modal is displaying two close x buttons instead of just one. Despite my efforts, I have been unable to pinpoint what exactl ...

javascripthtmlcssmagnific-popup

What is the best way to implement coding for portrait styles specifically on the Kindle Fire device?

Any recommendations on how to specifically code the styles for portrait orientation solely on the Kindle Fire device? ...

htmlcsstabs

When the JavaFX ComboBox drop-down opens in an upwards direction, the border appears incorrectly

While working with Java 8, I encountered an issue with the "javafx.scene.control.ComboBox" where if it doesn't have enough room below, it pops up instead. Strangely, the border styling of the elements still behaves as if it should pop down. Is there ...

cssjavafxcomboboxstyling

Display issue with grid-template-column not appearing

My grid column isn't working in my Christmas matching game project. I'm trying to create additional card columns using grid template columns, but the other three columns are not displaying as intended. They should be positioned right next to "Tim ...

htmlcss

Applying CSS Filters can sometimes interfere with the functionality of 3D

While playing around with CSS transforms, I discovered that filters flatten the transforms just like setting transform-style: flat. var toggleFilter = function() { var div = document.getElementById("cube") if (div.className == "cube") { d ...

javascripthtmlcsscss-transformscss-filters

What could be causing the Quasar drawer to overlap the Quasar toolbar in a Vue application?

I am currently utilizing the quasar UI framework and have a main layout file that includes only a toolbar. This toolbar is meant to display across all pages in my application. <template> <q-layout view="hHh Lpr lff" style="backgro ...

javascripthtmlcssvue.jsquasar-framework

Combining divs with identical values in Angular

I am working on creating my very own custom Calendar. Take a look at the full example of my component here I need help figuring out how to combine week divs that share the same value {{day.weekNumber}} so that there is only one div for each shared value, ...

htmlcssangular

I'm encountering an undefined JavaScript variable, how should I proceed?

$(function(){ //Location was "set". Perform actions. $("#geocodesubmit").click(function(){ var geocoder = new google.maps.Geocoder(); geocoder.geocode( { 'address': address}, function(results, status) { if (status ...

javascriptjqueryhtmlcssgoogle-maps

animation of leaping to a specific element

I am currently working on a sidebar with links that have a hover effect to add a bullet. However, I want the bullet to smoothly follow the cursor's movement along the y-axis within the sidebar instead of jumping between the links. How can I achieve th ...

javascriptjquerycsshtml