i'm using Font Awesome in my Angular application and i'm trying to rotate a refresh icon when it's clicked.
<div class="col-5 d-flex justify-content-end">
<span class="mr-4 pr-3">
<fa-icon
style="color: white; font-size: large; top: 0;"
[icon]="faArrowAltCircleDown"
(click)="refreshTaskList()">
</fa-icon>
</span>
</div>
I've tried to add rotate="360" aswell as transform="rotate-90" but unfortunately all without any success.
I'm open for suggestions.
You can use CSS only for that, no Angular required:
button:focus i {
animation: rotate 1s ease-in-out 0s;
}
#keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<button class="btn btn-primary btn-sm" type="button"><i class="fa fa-play"></i></button>
You could use above code and convert it so it fulfills to your desired results.
Source: Angular Button click rotate icon
Related question (Temani Afif's comment): Font Awesome 5 How to arrange different icons?
Related
So I made a working concept based on Bootstrap 5.2.3 where I can switch languages inside a card element with the click on an icon based on the multi-collapse feature (no JavaScript). The flag, the title and the contents switches from NL to EN and back when you click on the flag
My main issue: when you switch from one language to another the switch feels quite clunky: you can see the new header appearing and the old one disappearing. Is there a bootstrap command/way to make that switch smoother?
https://jsfiddle.net/17vugqtz/
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/6.6.6/css/flag-icons.min.css">
<div class="col">
<div class="card mb-4 rounded-3">
<div class="card-header" id="PageSummary">
<b class="textNL collapse multi-collapse show" aria-expanded="true">Samenvatting</b>
<b class="textEN collapse multi-collapse" aria-expanded="false">Summary</b>
<a id="flagEN" class="float-end" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-controls="flagNL flagEN collNL collEN textNL textEN" aria-expanded="true">
<span class="collapse multi-collapse show fi-us"> EN </span>
</a>
<a id="flagNL" class="float-end" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-controls="flagNL flagEN collNL collEN textNL textEN" aria-expanded="false">
<span class="collapse multi-collapse fi-nl"> NL </span>
</a>
</div>
<div class="card-body">
<div class="collapse multi-collapse show" id="collNL" aria-expanded="true">NL tekst komt hier.
</div>
<div class="collapse multi-collapse" id="collEN" aria-expanded="false">EN text will go here.
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
If you want no animation
Unfortunately you cannot use data-bs-animation="false" here; it's not build-in for Bootstrap's collapse component. So you need a CSS solution:
.multi-collapse {
transition: none;
}
https://jsfiddle.net/L61dq7u5/
If you want a smoother transition
Try the CSS below.
.multi-collapse {
opacity: 0;
transition: opacity 0.35s ease;
visibility: hidden;
}
.multi-collapse.show {
visibility: visible;
transition-delay: 0.05s;
opacity: 1;
}
https://jsfiddle.net/23y19x0q/
I am working on a website (built in HTML/CSS) in which I want to move the blinking cursor towards the right so that its not on the top of icon.
The snippets of HTML and CSS which I have used in order to make a search icon is:
.searchicon {
position: absolute;
left: 34.5%;
top: 22.4%;
transform: translateY(-50%);
color: red;
pointer-events: none;
}
<div class="input-searchicon">
<input class="form-control search_radius mb-4" type="text">
<span class="fa fa-search searchicon" aria-hidden="true "></span>
</div>
Problem Statement:
I am wondering what changes I should make in the HTML/CSS so that I can move the blinking cursor slight towards the right so that the icon is full visible.
At this moment, the blinking cursor is all over icon as seen in the screenshot:
Use padding on the input element to adjust the position of the blinking cursor.
I have edited the code. But in your case all you need to do is add
.input-searchicon input{
padding-left: 35px;
}
That will do it. Adjust the position either by increasing or decreasing the padding.
.input-searchicon{
position: relative;
}
.input-searchicon input{
padding-left: 35px;
}
.searchicon {
position: absolute;
left: 5px;
top: 10px;
transform: translateY(-50%);
color: red;
pointer-events: none;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="input-searchicon">
<input class="form-control search_radius mb-4" type="text">
<span class="fa fa-search searchicon" aria-hidden="true "></span>
</div>
Instead of changing the css of the span element (which is the Search Icon), try to change the style within the input element. Assuming you're using Bootstrap, you could add pl-1 to adjust the padding-left;
<div class="input-searchicon">
<input class="form-control search_radius mb-4 pl-4" type="text">
<span class="fa fa-search searchicon" aria-hidden="true "></span>
</div>
You could visit this Jsfiddle here to see what the sample output.
I'm playing around with bootstrap and trying to just get the icon spin with the text staying still but still inside the button tag.
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
<button class="btn btn-block btn-primary"><i class='fa fa-thumbs-up fa-spin'>Like</i></button>
</div>
remove text from the icon maker :)
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
<button class="btn btn-block btn-primary"><i class='fa fa-thumbs-up fa-spin'></i>Like</button>
</div>
You can put the text outside the i tag
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
<button class="btn btn-block btn-primary"><i class='fa fa-thumbs-up fa-spin'></i>Like</button>
</div>
It's easy as this
<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
And if you want your icons to spin in reverse while maintaining browsers' support use this
.fa-spin-reverse {
-webkit-animation: fa-spin-reverse 2s infinite linear;
animation: fa-spin-reverse 2s infinite linear;
}
#-webkit-keyframes fa-spin-reverse {
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
0% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
#keyframes fa-spin-reverse {
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
0% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
Replace button code with this code :
<button class="btn btn-block btn-primary"><i class='fa fa-thumbs-up fa-spin'></i>Like</button>
Note: Always keep text outside from the i tag while using icons libraries
Using below code, I am able to highlight the element with value 2 and 3 instead of element 3. I tried using last child and nth-last-type but didn't work as expected. Issue is with highlighting immediate next element of class - active and apply blink to both tick mark of 3 and value 3 and change of active class to change blink
No Jquery solution, as currently trying to implement using CSS3
I am trying to choose first element of class hightlight without active class using CSS only
HTML:
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<div class="steps" style="width:26%;float:left">
<div class="stepSection">
<table>
<tr><td><div class="highlight active"><span class="glyphicon glyphicon glyphicon-ok"></span></div></td><td>1.</td><td> <span>one</span></td></tr>
<tr><td><div class="highlight active" ><span class="glyphicon glyphicon glyphicon-ok"></span></div></td><td>2.</td><td> <span>two</span></td></tr>
<tr><td><div class="highlight"><span class="glyphicon glyphicon glyphicon-ok"></span></div> </td><td>3.</td><td><span>three</span></td></tr>
<tr><td><div class="highlight"><span class="glyphicon glyphicon glyphicon-ok"></span></div> </td><td>3.</td><td><span>four</span></td></tr>
</table>
</div>
</div>
<div style="width:2%;float:left;">
<div class="highlight active">1</div>
<div class="highlight active">2</div>
<div class="highlight">3</div>
<div class="highlight">4</div>
</div>
CSS3:
.highlight{
color:white;
width:20px;
height:20px;
border-radius:50%;
background: rgb(234,116,0);
display: inline-block;
text-align: center;
}
.active{
background:green;
}
#keyframes blink {
to { background: rgb(234,116,0); }
}
.active + .highlight{
color: white;
background: white;
animation: blink 2s steps(2, start) infinite;
}
Method 1: Jquery
You can do it using jquery like so
$(".active:last").next().addClass("blink")
And change your css to have blink class
.blink {
color: white;
background: white;
animation: blink 2s steps(2, start) infinite;
}
Working Js fiddle
Method 2:
If you want to do it only using css , you need to book keep your last element
by adding a class to the last element say .last
<div style="width:2%;float:left;">
<div class="highlight active">1</div>
<div class="highlight active last">2</div>
<div class="highlight">3</div>
<div class="highlight">4</div>
</div>
and then do you css like
.last + .highlight {
color: white;
background: white;
animation: blink 2s steps(2, start) infinite;
}
Method 3:
change your css to
div.active + div:not(.active){
color: white;
background: white;
animation: blink 2s steps(2, start) infinite;
}
Basically it finds the element which has class active before it and the next class which does not have the class active.
working jsfiddle
Instead of nth-last-type you may use:
.highlight + .highlight:not(.active):nth-of-type(3) {
The snippet:
.highlight {
color: white;
width: 20px;
height: 20px;
border-radius: 50%;
background: rgb(234, 116, 0);
display: inline-block;
text-align: center;
}
.active {
background: green;
}
#keyframes blink {
to {
background: rgb(234, 116, 0);
}
}
.highlight + .highlight:not(.active):nth-of-type(3) {
color: white;
background: white;
animation: blink 2s steps(2, start) infinite;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="steps" style="width:26%;float:left">
<div class="stepSection">
<table>
<tr>
<td>
<div class="highlight active"><span class="glyphicon glyphicon glyphicon-ok"></span></div>
</td>
<td>1.</td>
<td><span>one</span></td>
</tr>
<tr>
<td>
<div class="highlight active"><span class="glyphicon glyphicon glyphicon-ok"></span></div>
</td>
<td>2.</td>
<td><span>two</span></td>
</tr>
<tr>
<td>
<div class="highlight"><span class="glyphicon glyphicon glyphicon-ok"></span></div>
</td>
<td>3.</td>
<td><span>three</span></td>
</tr>
<tr>
<td>
<div class="highlight"><span class="glyphicon glyphicon glyphicon-ok"></span></div>
</td>
<td>3.</td>
<td><span>four</span></td>
</tr>
</table>
</div>
</div>
<div style="width:2%;float:left;">
<div class="highlight active">1</div>
<div class="highlight active">2</div>
<div class="highlight">3</div>
<div class="highlight">4</div>
</div>
I am trying to POST to a server using <button type="submit"> save </button> but I need to style the button to look a certain way using css.
Here is what im trying to accomplish:
But this is what i get:
I need to style the button element to look like the correct image and remove the default button styles.
CSS
.inner-button
{
color: #008db8;
}
.inner-button:hover
{
color: #ad9961;
cursor: pointer;
text-decoration: none;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<button class="inner-button" type="submit" >
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x img-responsive"></i>
<i class="fa fa-floppy-o fa-stack-1x fa-inverse img-responsive"></i>
</span><br />
<b>Save</b>
</button>
You just have to remove the default CSS styling.
.inner-button {
background: none;
border: none;
margin: 0;
padding: 0;
}