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
Related
My html
<fieldset class="field_one">
<legend>Character Creation <i class="fa-solid fa-signs-post"></i></legend>
<div id="message">...............</div>
<img src="./image/index1.png" id="mainImage" alt="">
<div class="button">¡Generate Character!</div>
<div class="button">¡Generate Nickname!</div>
</fieldset>
My css keyframe
#keyframes rainbow {
0% {color:red;}
25% {color:blue;}
50% {color:gold;}
75% {color:greenyellow;}
100% {color:red;}
}
My jquery js
$('fieldset').hover(function() {
$(this).css({"animation":"rainbow","font-size":"18pt"}, 1000);
});
Is for a work i need to do and i cant really find a way to make it work with jquery (i know that is way easier with plain css)
Set a class with your animation rules and then use addClass()
$('fieldset').hover(function() {
$(this).addClass('rainbowAnim');
});
#keyframes rainbow {
0% {color:red;}
25% {color:blue;}
50% {color:gold;}
75% {color:greenyellow;}
100% {color:red;}
}
.rainbowAnim {
-webkit-animation: rainbow 5s infinite;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset class="field_one">
<legend>Character Creation <i class="fa-solid fa-signs-post"></i></legend>
<div id="message">...............</div>
<img src="./image/index1.png" id="mainImage" alt="">
<div class="button">¡Generate Character!</div>
<div class="button">¡Generate Nickname!</div>
</fieldset>
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?
I'm trying to align text horizontally in line with Font Awesome SVG animation as per the image
What I can't get round is the placing of the text as per the fiddle here https://jsfiddle.net/4wvbrp6o/8/
<div class="gears">
<i class="fas fa-cog fa-5x slow-spin" data-fa-transform="down-6 right-5"></i>
<i class="fas fa-cog fa-4x slow-spin" data-fa-transform="down-19 right-1"></i>
<i class="fas fa-cog fa-6x slow-spin" data-fa-transform="up-1 left-9"></i>
<h1>
TO BE ALIGNED IN LINE
</h1>
</div>
.slow-spin {
-webkit-animation: fa-spin 6s infinite linear;
animation: fa-spin 6s infinite linear;
}
h1{
font-size: 36px;
}
As soon as I style the text as h1 the alignment goes off completely. How can I align the text as per the image?
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 getting parser error when I try to use CSS animations.
Server Error in '/' Application.
Parser Error
Description: An error occurred during the parsing of a resource required to service this request. Please review the following specific parse error details and modify your source file appropriately.
Parser Error Message: "-" is not valid at the start of a code block. Only identifiers, keywords, comments, "(" and "{" are valid.
<html>
<head>
.spin {
-webkit-animation: spin .2s infinite linear;
-moz-animation: spin .2s infinite linear;
-o-animation: spin .2s infinite linear;
animation: spin .2s infinite linear;
-webkit-transform-origin: 50% 58%;
transform-origin: 50% 58%;
-ms-transform-origin: 50% 58%; /* IE 9 */
}
#-moz-keyframes spin {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<h1 class="text-center">
<span class="glyphicon glyphicon-refresh spin"></span>
<span class="glyphicon glyphicon-record spin"></span>
<span class="glyphicon glyphicon-send spin"></span>
<span class="glyphicon glyphicon-star spin"></span>
</h1>
<h3 class="text-center">
<span class="glyphicon glyphicon-refresh spin"></span>
<span class="glyphicon glyphicon-record spin"></span>
<span class="glyphicon glyphicon-send spin"></span>
<span class="glyphicon glyphicon-star spin"></span>
</h3>
<h6 class="text-center">
<span class="glyphicon glyphicon-refresh spin"></span>
<span class="glyphicon glyphicon-record spin"></span>
<span class="glyphicon glyphicon-send spin"></span>
<span class="glyphicon glyphicon-star spin"></span>
</h6>
</body>
</html>
Add <style type="text/css"> just below the head tag and above your CSS code. It looks like you have the closing tag at the bottom already.