i am using angular and my question is simple how can i make to rotate this icon when i click on it?:
<div class="col-lg-1 col-md-4 col-sm-2 col-2 alend-text">
<i class="pomrgto iconfa fas fa-chevron-circle-right view_cir" title="Ver" aria-hidden="true" (click)="isCollapsed = !isCollapsed"
[attr.aria-expanded]="!isCollapsed" aria-controls="collapseBasic"></i>
</div>
the icon is the pomrgto iconfa fas fa-chevron-circle-right view_cir class, i want to do this:
When i click the icon, i want to make this rotate 90 degrees to the right making a little rotate animation, and when i click again go to the original state...
I know i can do it with css, but can you give me an idea of how can i do that?
Thank you!.
try something like this:
By default set transition property on the arrow.
On click of the icon, add a new class to it (let say "active")
then in CSS:
.pomrgto{
transition: transform 1s;
}
.active{
transform: rotate(90deg)
}
Related
I am currently a student learning HTML and CSS. I was tasked with an assignment to replicate a single webpage. However, I am having difficulties getting the icons to look like what is shown in the model provided to replicate. The images below show what the icon area of the model should look like versus what I have, and also what the original icons looked like when just added to the HTML before color or size adjustments were made.
Original icon area of the model provided.
How close I have gotten to it
Original icons before size and color adjustments were made
I need to get the edges to be sharp and the white areas above and below the icons to be removed. I tried setting the border-radius, margin, and padding to 0px or 0% and nothing still works. I also tried using text-shadow.
My HTML code for the icon area is
'<div class="icons">
<i class="fab fa-twitter-square"></i>
<i class="fab fa-facebook-square"></i>
<i class="fab fa-dribbble-square"></i>
<i class="fab fa-tumblr-square"></i>
<i class="fas fa-rss-square"></i>
</div>'
And CSS
'i{
display: inline-flexbox;
font-size: 24px;
color: #3E5A99;
background-color: #E5EEFF;
margin-bottom: 50px;
}'
I am asking for some advice on how to get this done, please. Thank you in advance.
The short answer is no, you cannot edit the FontAwesome webfont icons without downloading, editing, and reuploading the individual svgs.
I would use the background-less versions of these icons and then put them each inside a div. Then you can set the div border-radius, background-color, etc. to exactly what you need.
A couple of pointers with this process:
Use display: grid; for each container div, that way you can also add place-items: center; to super-center each icon inside of it's div.
I'm trying to set a custom icon for my Universal app's appbar. Segoe UI Symbol just doesn't have everything I'm after. I would like to use FontAwesome. Unfortunately, I can't figure out how to do that.
The only official way I can find to put custom icons into an app bar is to use PNGs, but these do not scale as well as font-awesome and are awkward to make.
The closest I've come is to create a div based element on the appbar which looks like an appbar button:
<div data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{ id:'btnLab',label:'Lab', section:'global', type:'content'}">
<div id="itemContainer" data-win-control="WinJS.UI.ItemContainer">
<i class="fa fa-flask" style="color: #000; font-size: 19px;
padding: 10px; border: 2px solid #222; border-radius: 50%;">
</i>
<br/>
<span style="color: #000; font-size: 12px;">Lab</span>
</div>
</div>
This produces something pretty close to an appbar button, which is clickable and can be assigned a behaviour
With some tweaking I believe I could get this to look identical to a button, however I'm not confident it will scale the same way that normal app bar buttons do. Also when hovering there is this nasty border around it:
Does anyone know how I can just use font-awesome, or some other font based icon set, directly in a button?
I've found an answer for this - it can be done quite easily using script. I used the DOM inspector to find that the actual HTML for the button image is like so
<button class="win-disposable win-command win-global" id="cmdKey" role="menuitem"
aria-label="Key" type="button" data-win-options="{id:'cmdKey',label:'Key',icon:'',
section:'global',tooltip:'testing out font-awesome'}"
data-win-control="WinJS.UI.AppBarCommand">
<span tabindex="-1" class="win-commandicon win-commandring"
aria-hidden="true">
<span tabindex="-1" class="win-commandimage" aria-hidden="true"
style="-ms-high-contrast-adjust: none;"></span>
</span>
<span tabindex="-1" class="win-label" aria-hidden="true">
Key
</span>
</button>
You can very easily target win-commandimage using either jQuery or straight JS and put a font-awesome icon directly in there
$('#cmdKey .win-commandimage').html('<i class="fa fa-key"></i>');
I find the icons a little small, but this can easily be fixed with CSS
#cmdKey .win-commandimage
{
font-size: 20px;
}
I encountered this issue yesterday.
<div data-win-control="WinJS.UI.AppBar" id="appBar" data-win-options="{placement: 'bottom'}" style="overflow: hidden;">
<button class="fa fa-flask" style="font-size: 2em; padding-bottom: 15px;" data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id: 'flaskBtn', section:'global', label: 'Lab', tooltip:'Lab'}"></button>
</div>
Javascript:
var myAppBar = element.querySelector("#appBar");
myAppBar.winControl.closedDisplayMode = "full";
This worked for me. To enlarge the font size, I had to use style="font-size: 2em" -- for some reason, the larger icon classes (fa-lg, fa-2x, fa-3x, fa-4x) don't work when declared in a class and it's within an AppBar.
class="fa fa-flask fa-2x" works if you create a Font Awesome element outside of an AppBar.
I am working on an app that uses Bootstrap. You can see it for yourself here. When a user clicks a link, I want it to rotate. The code is very small. It looks like this:
<div class="form-group">
<ul class="list-inline">
<li><button class="btn btn-link"><span class="glyphicon glyphicon-chevron-down"></span></button></li>
<li><h5>category</h5></li>
</ul>
</div>
When a user clicks the "v" I want it to animate from "v" to ">". In other words, I want the chevron to rotate counter-clockwise 90 degrees when someone clicks it. After looking at the powerful features in CSS 3, it looks like there is a way to do this using pure CSS. Am I correct, if so, how?
Try this:
DEMO
<div class="form-group">
<ul class="list-inline">
<li><button class="btn btn-link"><span class="glyphicon glyphicon-chevron-down"></span></button></li>
<li><h5>category</h5></li>
</ul>
</div>
SCRIPT:
$('.glyphicon').on('click', function(){
$(this).toggleClass('glyphicon-chevron-down glyphicon-chevron-right');
});
To rotate an element using CSS you can simply use transform: rotate(-90deg)
However, this will not rotate it on click just yet. You will probably need javascript for that. One way to do it (using jquery, since bootstrap already requires it):
CSS:
.rotated {
transform: rotate(-90deg);
}
JS:
$('.yourElement').click(function() {
$(this).toggleClass('rotated');
});
The 'toggleClass' will make sure the rotation is reverted when you click it again. Otherwise, just use 'addClass' to only use it once.
edit
As pointed out by Harry, you could also use the already present 'icon-chevron-right' in a similar fashion:
$('.yourElement').click(function() {
$(this).toggleClass('icon-chevron-down icon-chevron-right');
});
As long as your html started with only one of those two classes, this code will always remove one and add the other.
Css :
.spinEffect{
-webkit-animation: spin 0.5s infinite linear;
}
jQuery :
$(function(){
$(".whatIsClicked").click(function(){
$("#yourDiv").addClass("spinEffect");
});
});
You can use a simple script like this.
Script:-
$(document).ready(function(){
$( ".btn.btn-link" ).click(function() {
$(this).toggleClass( "rotate" );
});
})
css:-
.rotate{
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
}
html:-
<div class="form-group">
<ul class="list-inline">
<li><button class="btn btn-link"><span class="glyphicon glyphicon-chevron-down"></span></button></li>
<li><h5>category</h5></li>
</ul>
</div>
Hope it eill work for you!
I'm trying to animate a fontawesome icon, inside a span it works fine, but when I put the icon inside an anchor it stops working on chrome, on IE it works.
I am using FontAwesome 3.2.1
and this is my code
Html:
<a>
<i class="icon-wrench rotator"></i>
</a>
CSS:
.rotator {
display: inline-block;
-webkit-animation: rotate 2.5s 4 ease;
-webkit-transform-origin:90% 35%;
}
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(-12deg);
}
to {
-webkit-transform: rotate(112deg);
}
}
I tried it with FontAwesome 3.0.2 and it works, when I upgraded to 3.2.1 it stopped working, on chrome at least.
Thanks in advance
Edit
I also have more html inside the anchor and I don't want that to rotate so adding the 'rotator' class to the anchor won't do it
Edit
This is the actual html (the example above is simplified):
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-bell-alt icon-animated-bell icon-only"></i>
<span class="badge badge-success">5</span>
</a>
Add the rotator class to the anchor instead. It will start rotating on page load, assuming this is what you want?
http://jsfiddle.net/7kANu/4/
<a class="rotator">
<i class="icon-wrench"></i>
</a>
EDIT: Are you not able to wrap the icon in a div and assign the rotator class to that as a workaround?
I have to wrap my icon within an <a> tag for some reason.
Is there any possible way to change the color of a font-awesome icon to black?
or is it impossible as long as it wrapped within an <a> tag? Font awesome is supposed to be font not image, right?
<i class="icon-cog"></i> Edit profile
This worked for me:
.icon-cog {
color: black;
}
For versions of Font Awesome above 4.7.0, it looks this:
.fa-cog {
color: black;
}
HTML:
<i class="icon-cog blackiconcolor">
css :
.blackiconcolor {color:black;}
you can also add extra class to the button icon...
You can specify the color in the style attribute:
<i class="icon-cog" style="color:black"></i> Edit profile
Try this:
<i class="icon-cog text-red">
<i class="icon-cog text-blue">
<i class="icon-cog text-yellow">
To change the font awesome icons color for your entire project use this in your css
.fa {
color : red;
}
If you don't want to alter the CSS file, this is what works for me. In HTML, add style with color:
<i class="fa fa-cog" style="color:#fff;"></i>
Is there any possible way to change the color of a font-awesome icon to
black?
Yes, there is. See the snipped bellow
<!-- Assuming that you don't have, this needs to be in your HTML file (usually the header) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Here is what you need to use -->
Edit Profile
Font awesome is supposed to be font not image, right?
Yes, it is a font. Therefore, you are able to scale it to any size without losing quality.
To hit only cog-icons in that kind of button, you can give the button a class, and set the color for the icon only when inside the button.
HTML:
<a class="my-nice-button" href="/users/edit">
<i class="icon-cog"></i>
Edit profile
</a>
CSS:
.my-nice-button>i { color: black; }
This will make any icon that is a direct descendant of your button black.
With reference to #ClarkeyBoy answer, below code works fine, if using latest version of Font-Awesome icons or if you using fa classes
.fa.icon-white {
color: white;
}
And, then add icon-white to existing class
For me the only thing that worked is inline css + overriding
<i class="fas fa-ellipsis-v fa-2x" style="color:red !important"></i>
just give and text style whatever you want like :D
HTML:
<a href="javascript:;" class="fa fa-trash" style="color:#d9534f;">
<span style="color:black;">Text Name</span>
</a>
.fa-search{
color:#fff;
}
you write that code in css and it would change the color to white or any color you want, you specify it
You can change the Font Awesome's icon color with the bootstrap class
use
text-color
example
text-white
Sometimes changing the colour in the external css file doesn't work. You can add inline css property in the icon tag and that will work.
For example
<i class="fa-solid fa-keyboard" style="color: grey;"></i>
just give it the style whatever you want like
style="color: white;font-size: 20px;"
You can change the color of a fontawesome icon by changing its foreground color using the css color property. The following are examples:
<i class="fa fa-cog" style="color:white">
This supports svgs also
<style>
.fa-cog{
color:white;
}
</style>
<style>
.parent svg, .parent i{
color:white
}
</style>
<div class="parent">
<i class="fa fa-cog" style="color:white">
</div>
Write this code in the same line, this change the icon color:
<li class="fa fa-id-card-o" style="color:white" aria-hidden="true">
Use color property to change the color of your target element as follow :
.icon-cog { // selector of your element
color: black;
}
Or in the newest version of font-awesome , you can choose among filled or not filled icons
If you want to change the color of a specific icon, you can use something like this:
.fa-stop {
color:red;
}
It might a little bit tricky to change the color of font-awesome icons. The simpler method is to add your own class name inside the font-awesome defined classes like this:
.
And target your custom_defined__class_name in your CSS to change the color to whatever you like.
Open the svg file in vs code or something
change the line
path fill="gray" to what ever color you want! in my case i change it to gray!
I added a style, then color of your choice and make sure to make it bold
HTML:
<i class="icon-cog blackiconcolor">
css :
.blackiconcolor {color:black;}
Using class will give you a free binding property which you can apply on any tag you require.