I have a fa-info, with a fa-comment as a mask:
<script src="https://use.fontawesome.com/releases/v5.14.0/js/all.js"></script>
<span class="fas fa-info fa-4x" data-fa-mask="fas fa-comment" data-fa-transform="up-1 shrink-9"></span>
and it looks like this:
If I rotate it using css transform, it looks like this:
If I rotate it using data-fa-transform="flip-h", it looks like this:
fun, right? well, no
I need to rotate ONLY the mask (fa-message), so the i stays like the first, and the message icon rotates like the second.
Any thoughts?
You are almost there. Use flip-h and transform at the same time:
body {
background:pink;
}
.invert {
transform:scaleX(-1);
}
<script src="https://use.fontawesome.com/releases/v5.13.0/js/all.js"></script>
<span class="fas fa-info fa-4x" data-fa-mask="fas fa-comment" data-fa-transform="up-1 shrink-9"></span>
<span class="fas fa-info fa-4x invert" data-fa-mask="fas fa-comment" data-fa-transform="up-1 shrink-9 flip-h"></span>
Related
This question already has answers here:
How to change the inner white color of Font Awesome's exclamation triangle icon?
(2 answers)
Closed 3 years ago.
I want to set background color for a fontawesome icon :
.vert {
background: springgreen;
}
...
return '<i class="fa fa-circle-thin vert"></i>';
At runtime I get this :
So how to fill just the interior of the circle ?
You can use stacked icons.
.vert {
color: springgreen;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.css">
<span class="fa-stack">
<i class="fas fa-circle vert fa-stack-2x"></i>
<i class="far fa-circle fa-stack-2x"></i>
</span>
Using Layers in Font Awesome 5
This feature requires that you use SVG + JS version of Font Awesome 5.
.vert {
color: greenyellow;
}
<script src="https://use.fontawesome.com/releases/v5.8.1/js/all.js" data-search-pseudo-elements></script>
<div class="fa-4x">
<span class="fa-layers fa-fw">
<i class="fas fa-circle vert" ></i>
<i class="far fa-circle"></i>
</span>
</div>
You can change the colour of the font-awesome icon by using color: springgreen;
In addition you will want to use a solid icon such as this https://fontawesome.com/icons/circle?style=solid
.vert {
color: springgreen;
}
...
return '<i class="fas fa-circle vert"></i>';
If you need to fill the entire icon with spring green. Then use Border-radius.
Example:-
.vert {
color: springgreen;
}
Or if you want to color only on the border. You can use the color property as depicted in the above answers.
font-awesome V5
This example describes exactly the version you are using.
.vert {
color: springgreen;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<span class="fa-stack">
<i class="fas fa-circle vert fa-stack-2x"></i>
<i class="far fa-circle fa-stack-2x"></i>
</span>
Here is codepen to describe your concern "Something wrong because interacting with bootstrap".
I want to rotate chevron when the button is clicked. So my question would be - how to do it? Should I add the whole Angular animation component and do it there or is it possible to just add rotate to just a chevron?
<a href="#" (click)="transformArrow()">Show
<span>
<label class="m-0">this</label>
<span class="glyphicons glyphicons-chevron-down" id="myElement"></span>
</span>
</a>
then I tried to add some function
transformArrow(){
let ele = document.getElementById('myElement');
ele.style.transform //And I stuck here as I need to actually access ":before" of this element and rotate it.
}
Huge thanks to trichetriche and malbarmawi for alternative, only thing that I had to change was "after" to "before" :)
My idea is:
transformArrow(e) {
let ele = document.getElementById('myElement');
ele.classList.toggle('btn-change');
}
.glyphicons-chevron-down
{
transition: $trans-1;
&.btn-change
{
&:before
{
position: relative;
display: block;
transform: rotate(180deg);
}
}
}
I really like the idea with ngClass but I like to keep most of actions in component.ts so i wanted to stay with function. Is it even good, or maybe it's better practice to do it the way malbarmawi did?
Why not do it through CSS and custom attributes ?
ele.setAttribute('data-rotate', 'true')
span#myElement[data-rotate="true"]:after {
transform: rotate(90deg);
}
You can use ngStyle directive
<a href="#" (click)="toggle = !toggle">Show
<span>
<label class="m-0">this</label>
<span [ngStyle]="{'transform': toggle ? 'rotate(180deg)':''}" class="fa fa-arrow-right"></span>
</span>
</a>
another way ngClass directive
<a href="#" (click)="toggle = !toggle">Show
<span>
<label class="m-0">this</label>
<span [ngClass]="{'flip-h': toggle}" class="fa fa-arrow-right fa-2x"></span>
</span>
</a>
or with element reference (not recommended)
<a href="#" (click)="elem.classList.toggle('flip-h')">Show
<span>
<label class="m-0">this</label>
<span #elem class="fa fa-arrow-right fa-2x" id="myElement"></span>
</span>
</a>
demo
Is there a way to overlap two Font Awesome icons in such a way that it looks like the files icon with respect to the file icon? I don't want to stack the icons but rather have one cover like 50% of another. Thanks!
Why not just use CSS padding to offset one of the icons?
<span class="fa-stack fa-lg">
<i class="fa fa-file fa-stack-2x"></i>
<i class="fa fa-file fa-stack-2x" style="padding-left:15px;padding-top:15px;"></i>
</span>
Fiddle: http://jsfiddle.net/mwatz122/sx7fk582/
I'm doing a bit of testing on a project I'm working on and on Firefox, I have this button which looks like this:
instead of looking like this(in Chrome)
The code is straight forward:
<button class="btn btn-lg btn_social_login">
<i class="logo fa fa-facebook"></i>
Register with Facebook
<i class="arrow fa fa-chevron-right"></i>
</button>
With the left i float:left and the right i float:right. Page can be seen there http://kaboodle.io/sign_up . Can anyone tell me why this is happening on Firefox?
Changing :
white-space:nowrap;
Which is default on the .btn class in bootstrap
to:
white-space: normal;
fixed it.
Im looking for a good font awesome icon I could use as a "Reset" button for my application.
Im currently using fa-undo which looks like this:
The problem is that I need it to have a circle around it as the other buttons in my system do ( these are standard in font awesome icons, nothing has been modified except the color )
An example of what i need (with the undo image):
Ive been reading through the list here for nearly an hour but cant think of a possible alternative. Any thoughts?
FA has some utility classes, one of which is fa-stack. You can stack fa-circle underneath fa-undo.
.fa-circle {
color: #008db8;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<span class="fa-stack">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-undo fa-stack-1x fa-inverse"></i>
</span>