I would like to create a space between my fa icons and text but fa-fw isn't working and neither is.i {margin-left: 10px;}
Html:
<div class="logos1"><i class="fa fa-search">logos</i></div>
HTML
<div class="logos1">
<i class="fa fa-search">
<span class="padding">logos</span>
</i></div>
CSS
.padding{
padding-left:10px;
}
You are writing text between the i tag. This is not a good practice. You can achieve your goal using below code.
i{
margin-right: 10px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css" rel="stylesheet"/>
<div class="logos1"><i class="fa fa-search"></i>logos</div>
Related
<i class="fa fa-toggle-off" style="color:red" ></i>
currently , I am using above class and style for toggle off icon
I want to show it as shown below
How can I do that?
Thanks in advance.
With that icon you cannot get what you want.
As an alternative, you can use fas fa-toggle-on and rotate it for 180deg.
CodePen: https://codepen.io/kitchup/pen/yYeMXE
//HTML
<span class="toggle-off">
<i class="fas fa-toggle-on"></i>
</span>
//CSS
.toggle-off{
display: inline-block;
font-size: 30px;
color: red;
transform: rotate(180deg);
}
<span style="color: red">
<i class="fa fa-toggle-off"></i>
</span>
You'll need to use something like this.
As you can see in the code below, the texts on each line starts at a different location because the icons the preceded it have different dimensions which makes the text look messy. What is the best way to make it so that the texts are aligned with each other (meaning they all start from the same spot)?
.iconText {
margin-left: 10px;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
<p><i class="far fa-eye"></i><span class='iconText'>Views</span></p>
<p><i class="far fa-comments"></i><span class='iconText'>Comments</span></p>
<p><i class="fas fa-file-download"></i><span class='iconText'>Download</span>></p>
<p><i class="fas fa-tags"></i><span class='iconText'>Tags</span></p>
Font Awesome has a built in class to solve this problem. fa-fw (fw = fixed width)
Apply the class to each of the icons and they will occupy the same horizontal space.
https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons
.iconText {
margin-left: 10px;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
<p><i class="far fa-eye fa-fw"></i><span class='iconText'>Views</span></p>
<p><i class="far fa-comments fa-fw"></i><span class='iconText'>Comments</span></p>
<p><i class="fas fa-file-download fa-fw"></i><span class='iconText'>Download</span>></p>
<p><i class="fas fa-tags fa-fw"></i><span class='iconText'>Tags</span></p>
I would set each icon width to some static value for example:
i { width: 1em }
So far I have this:
<div class="w3-sidebar w3-bar-block w3-indigo w3-xxlarge" style="width:70px">
<i class="fa fa-user-circle"></i>
<i class="fa fa-id-card-o"></i>
<i class="fa fa-folder-open"></i>
</div>
If I enter text into the a tag, the text ends up looking jumbled and doesn't go under the button the way I want it to. How can I fix this?
I made a codepen that should match what you are attempting to do :
Here is the css :
.w3-sidebar {
width: auto;
}
.w3-bar-block .w3-bar-item {
/* Overrides default rule */
text-align: center;
}
.sidebar-icon-label {
display: block;
font-size: 10px;
}
You'll see that I removed the inline style of your w3-sidebar, and set it to "auto" instead, which means it will have the size of its content.
I created a new class for your icon labels, and overrode a native w3 rule to center everything.
Update your code Like this
<style>
i{ width:20px;
height:20px;
display:inline-block; }
a{ float:left; width:100%; text-align:center; }
span{ float:left; width:100%; text-align:center; }
</style>
<div class="w3-sidebar w3-bar-block w3-indigo w3-xxlarge"
style="width:70px">
<i class="fa fa-user-circle"></i><span>Text 1</span>
<i class="fa fa-id-card-o"></i><span>Text 1</span>
<i class="fa fa-folder-open"></i><span>Text 1</span>
</div>
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 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.