I am interested in rotating my font-awesome icons by a static 45 degrees. The site mentions the following:
To rotate and flip icons as desired, utilize the fa-rotate-* and fa-flip-* classes.
However, when I try this:
<i class="fa fa-link fa-rotate-45" style="font-size:1.5em"></i>
it does not work. Surprisingly, replacing fa-rotate-45 with fa-rotate-90 works fine. Does this mean that arbitrary rotation is not supported?
Using FontAwesome 5 for Rotations:
In the past, standard declarations only included .fa-rotate-90, .fa-rotate-180, and .fa-rotate-270. However, you now have the option to create your own rotation classes:
.fa-rotate-45 {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
Presently with FontAwesome 5:
You can utilize what is known as "Power Transforms". For example:
<i class="fas fa-snowman" data-fa-transform="rotate-90"></i>
<i class="fas fa-snowman" data-fa-transform="rotate-180"></i>
<i class="fas fa-snowman" data-fa-transform="rotate-270"></i>
<i class="fas fa-snowman" data-fa-transform="rotate-30"></i>
<i class="fas fa-snowman" data-fa-transform="rotate--30"></i>
To apply these rotations, add the data-fa-transform attribute with the value of rotate- followed by your desired degree of rotation.
Reference: https://fontawesome.com/how-to-use/on-the-web/styling/power-transforms
Exciting Update: New Font-Awesome version 5 comes with amazing Power Transforms
You now have the ability to rotate any icon by including the attribute data-fa-transform in the icon
<i class="fas fa-magic" data-fa-transform="rotate-45"></i>
Take a look at this helpful example
To learn more, visit this link: Font-Awesome5 Power Transforms
If anyone comes across this question and needs it, here is the SASS mixin I utilize.
@mixin rotate($deg: 90){
$sDeg: #{$deg}deg;
-webkit-transform: rotate($sDeg);
-moz-transform: rotate($sDeg);
-ms-transform: rotate($sDeg);
-o-transform: rotate($sDeg);
transform: rotate($sDeg);
}
To achieve a 45-degree rotation, simply apply the following CSS transform property:
.fa-rotate-45 {
-ms-transform:rotate(45deg); /* Works for Internet Explorer 9 */
-webkit-transform:rotate(45deg); /* Compatible with Chrome, Safari, Opera */
transform:rotate(45deg); /* Standard syntax for rotation */
}
Success! It did the trick.
<i class="fa fa-power-off text-gray" style="transform: rotate(90deg);"></i>
By utilizing Less, you have the capability to easily incorporate this mixin:
.@{fa-css-prefix}-rotate-90 { .fa-icon-rotate(90deg, 1); }
I am currently working with a scenario where data is being displayed within different div elements, and I wish to enable the selection/focus of a specific div when users use the up/down arrow keys. While trying to achieve this functionality by using refs ...
No matter what I try, nothing seems to be working for me. I'm looking to hide the <div id="disqus_thread"> at first and then reveal it when I click on the link "commenting", after the comments have loaded. This particular link is located at the ...
Having some trouble with formatting code and inserting/removing line numbers dynamically. The line numbers appear on the first page load, but disappear after clicking run. They don't show at all on my website. I want to allow users to click a button a ...
Here is the code I've been using to style my side navigation, which has been working perfectly without any transitions. SCSS Code and a functional JSFiddle .side-nav{ position: fixed; z-index: 100; right: 0; margin-top: 15vh; ul { lis ...
Is it feasible to customize the cursor during a drag operation? I've been exploring ways to achieve this for some time now. My goal is to replace the default 'not-allowed' cursor that appears when dragging an object with a different cursor. ...
Challenge How can the user login be displayed in the center of the page? Additional Information The current layout displays user login data on the left-hand side. I am looking to have the user login data centralized on the page, which includes labels f ...
After years of working on a website, it has grown significantly in size. The CSS files have become quite messy and unclear. I need to figure out how to identify which parts of my extensive CSS file are not being utilized on my homepage so that I can safel ...
I am experiencing an issue with an image that I have built: box Initially, the image appears to be a box with 4 elements inside. However, when I resize the window, the layout gets distorted. I am unsure which property I am using incorrectly, so I will pr ...
I'm facing an issue with a banner div under my navigation. It seems to show up in Google Chrome but doesn't appear in IE9. Below is the HTML and CSS code: HTML: <div class="content"> <div class="slide-banner"></div> ...
My webpage features a dynamic div that transforms into another div upon clicking a button. Although both divs share similar properties, clicking the button causes some elements to shift unexpectedly. Strangely enough, when the height of the replacing div i ...
Currently, I am attempting to modify the class of a button on my website. The initial state of the button is wide, but as the user scrolls, it should shrink in size. When hovering over the shrunken button, it should expand back to its original width. Alt ...
When hovering over the row (tr), the tr:hover rule is being applied. However, when hovering over the child text content of the tr input, the tr:hover rule is not being applied. This issue is specific to IE-8. Can anyone help me identify the root cause? N ...
It seems that using Google's Dosis font is causing issues with table layout: <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http:// ...
I'm currently facing a challenge in getting a border to perfectly fit around a collection of images. The issue can be observed in this Jsfiddle I shared, where the border aligns with the top and left edges, but not with the bottom and right edges. Her ...
Currently, I am working on a CSS/JS project that is unfamiliar to me and does not have any documentation available. I am attempting to justify images within a DIV, similar to the example shown here: https://jsfiddle.net/4jwfhk6c/ Despite replicating the ...
While it may not be possible to directly style PHP code, you can definitely style the HTML output that PHP generates. I'm curious if there's a way for me to apply styles to the output of an IF ELSE statement. if ($result != false) { print "Y ...
I came across the "equal height" classes in Semantic UI, but I'm having trouble applying them to inner divs, like the "ui segment" for example. More details can be found here. Take a look at my screenshots below: https://i.sstatic.net/o9kwC.png < ...
Does anyone have a solution for customizing the appearance of the Bootstrap switch button when it is disabled? I have successfully styled it for the enabled state, but it defaults to a dark appearance when disabled. I would like the disabled state to have ...
Has anyone successfully changed the width of the ASP.NET file uploader? I attempted by adding the CssClass, but it did not work. Is there an alternative method to adjust the width? Thanks in advance. ...
I have been attempting to adjust the width of pink lines on this jsfiddle link: animation of object In my code, I am defining local basis vectors as follows: // Defining local vector axis of plane var thetadir = new THREE.Vector3(1, 0, 0); var phidir = ...