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?
Related
I have used stars font awesome icons in which the first two stars have a yellow color, and the last two stars have a gray color and the middle star has two colors yellow and I want to make another half to be a gray color.
How do I make this?
see the snippet to understand
.star-full-color{
color: #FFB319 !important;
}
.star-no-color{
color: #EEEEEE !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>
<i class="fas fa-star star-full-color"></i>
<i class="fas fa-star star-full-color"></i>
<i class="fas fa-star-half star-full-color"></i>
<i class="fas fa-star star-no-color"></i>
<i class="fas fa-star star-no-color"></i>
I'm working on a project and had the following code snippet:
<h2 style="color: #818181;">Details</h2>
<p><i class="fa fa-envelope"></i> xxxxxxx#gmail.com<br>
<i class="fa fa-phone"></i> 12345678<br>
<i class="fa fa-map-marker"></i> 1 Yeet Street, Azerbaijan</p>
This left me this:
Image
Is there any way that I can reduce the line break between the header and the icons without the icons starting on a new line to their text?
The vertical space is a combination of the default top/bottom margins of both the h2 and the p elements. You will need to add styles to reduce/remove the margin, margin-top and/or margin-bottom using a CSS stylesheet:
h2 {
margin: 0;
}
p {
margin: 0;
}
Or using the inline styles:
<h2 style="color: #818181; margin: 0">Details</h2>
<p style="margin-top: 0;"><i class="fa fa-envelope"></i> xxxxxxx#gmail.com<br>
<i class="fa fa-phone"></i> 12345678<br>
<i class="fa fa-map-marker"></i> 1 Yeet Street, Azerbaijan</p>
I need to put multiple fa icon a trophy that must be the container and inside a number. Something like this:
https://img.clipartfest.com/fc3163ee61d664e212d4bb9764702efa_trophy-clipart-black-and-white-trophy-number-1-clipart_1920-1920.jpeg
The code that I use is ( but is not work) :
<!-- create trophy -->
<i class="fa fa-trophy fa-4x" aria-hidden="true" style="color:#FF8000;"><span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-stack-1x">1</i>
</span>
</i>
it is not work because the cirle is very big and it appears near to trophy and not above the trophy also the number 1 appears near the circle? Anyone can help me?
I believe you want something like this?
<i class="fa fa-trophy fa-2x"style="color:#FF8000;vertical-align:middle"></i>
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-stack-1x"style="color:#FF8000;">1</i>
</span>
The sizes can be changed with the font awesome classes. The font awesome stacking works by placing elements on increasing layers, so the first thing in the span will be on the bottom.
EDIT: moved trophy out and added styling to it. Although you generally shouldn't do styling like this
Your markup is wrong, try the following:
.trophy {
position: relative;
/* Parent needs to be taken out of normal document flow to center the number*/
}
.trophy__icon {
color: #FF8000;
}
/* Class to center the number */
.trophy__number {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: -6%;
text-align: center;
font-size: .5em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<span class="fa-stack fa-lg trophy">
<i class="fa fa-circle fa-stack-2x trophy__background"></i>
<i class="fa fa-trophy fa-stack-1x trophy__icon"></i>
<div class="trophy__number">1</div>
</span>
I'm an aspiring web designer and need help with an issue I'm having. I have an icon in Font Awesome that I want to change colour/style when I hover on it.
Here is the default style I'd like to use:
CSS
.fa-circle {
color:red;
}
HTML:
<span class="fa-stack fa-5x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-arrow-right fa-stack-1x fa-inverse"></i>
</span>
http://jsfiddle.net/94n0zxbt/2/
and here is what I'd like to have it change to on hover:
http://jsfiddle.net/94n0zxbt/5/
CSS
.fa-circle {
color:white;
border-color: red;
border-radius: 90px;
border-style: solid;
}
.fa-arrow-right {
color: red;
}
HTML
<span class="fa-stack fa-5x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-arrow-right fa-stack-1x fa-inverse"></i>
</span>
Thanks,
Ashley
The reason the normal :hover css isn't working is that the <i> tags are overlapping each other. If you put the arrow <i> tag inside the circle <i> it will work:
http://jsfiddle.net/pjpwea/94n0zxbt/6/
You will notice that the arrow has gotten twice as big (I assume this is from the '2x' class), not super familiar with Font Awesome but there is probably an easy fix.
I want to stack the two Font Awesome icons fa-star and fa-star-half, but I am having alignment issues. See image below:
Here is my HTML:
<span class="fa-stack">
<i class="fa fa-fw fa-lg fa-star-half fa-stack-1x"></i>
<i class="fa fa-fw fa-lg fa-star fa-stack-1x"></i>
</span>
...and my CSS:
a-stack i.fa-star {
color:transparent;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: orange;
}
.fa-stack i.fa-star-half {
color:yellow;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: orange;
}
Note that I do not want to use fa-star-half-o which has an unappealing design when used with an outline.
I have tried to use "float," but without success. If I use "margin-left," the spacing is off. See image below:
Any help is appreciated. Thanks!
Jesse
Use the following margin-left to line up the image. Check it out here: https://jsfiddle.net/f63h157x/1/
.fa-stack i.fa-star-half {
color:yellow;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: orange;
margin-left: -5px;
}
I think all you need to do is apply a text-align: left; to both of the <i /> elements and it should align properly without needing to use margin-left: 5px;
One viable solution is to use fa-star-half-o instead of fa-star-half.
<span class="fa-stack">
<i class="fa fa-fw fa-lg fa-star-half-o fa-stack-1x"></i>
<i class="fa fa-fw fa-lg fa-star fa-stack-1x"></i>
</span>
This way the width of the half-star is the same as the width of full stars, and your icons will stack up. No custom margins required.