I have some simple code which includes two font icons from FontAwesome.
They render like this in my browser:
Note that although both elements are 16px in height, the two icons are not vertically aligned, the calendar rests lower down than the
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://pro.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet"/>
<p>
<i class="fad fa-times-hexagon text-danger fa-fw"></i>
<i class="fad fa-fw fa-calendar"></i>
</p>
I can "fix" with bottom: -1px; on the hexagon but is there a better way to get the baselines aligned?
This would appear to be a problem with the glyphs defined in the font itself
Related
I'm having problem in making borders over fa fa star icon. It works perfectly but it's displaying behind fa fa icon.
I tired putting it in i tag but still it's not working.
<i class="fa fa-star" aria-hidden="true"></i>
<div class="text-block">
<h4>Nature</h4>
<p>What a beautiful sunrise</p>
</div>
If you added the class border to your icon tag, you could then give the element a border by adding the following CSS to your project.
.border{
border: 1px solid #000;
}
If this is not what you are looking for, please update your question to be more descriptive about, in what way, you want to add a border to your element.
I am trying to take the icon I got from FontAwesome and make it into one piece of text with the word 'Contribute'. Currently they are separate when hovered over.
<a class="contribute" href="#">Contribute</a><i class="fas fa-comments"></i>
That's because your Font Awesome icon is not inside your <a> element:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<a class="contribute" href="#">Contribute<i class="fas fa-comments"></i></a>
I have a bootstrap row, with 4 columns in it. Originally I had 3 columns with icons, and they all aligned perfectly. I added a fourth in, and now the new one I added is slightly further down the page than the rest. It just doesn't sit in line
<div class="col-12 padding">
<h3>Also take a look at my Github, Free Code Camp, Team Treehouse and LinkedIn profiles!</h3>
</div>
<div class="col-xs-12 col-sm-3">
<i class="fab fa-github icons"></i>
<h4>GitHub</h4>
</div>
<div class="col-xs-12 col-sm-3">
<i class="fab fa-free-code-camp icons"></i>
<h4>Free Code Camp</h4>
</div>
<div class="col-xs-12 col-sm-3">
<i class="fi-social-treehouse icons"></i>
<h4>Team Treehouse</h4>
</div>
<div class="col-xs-12 col-sm-3">
<i class="fab fa-linkedin icons"></i>
<h4>LinkedIn</h4>
</div>
It's the third column (team treehouse) that doesn't sit in line with the rest.
Also, they are all within a row div, it's just not shown.
EDIT:
It seems the problem is 3 of the icons are from Font Awesome, and the Treehouse icon is from Foundation Icons. Now I know the problem, but im not sure how to fix it. They are all styled to the same size
If you believe it is the icon, test your theory by adding a border to the icons class. This way you will be able to tell if the third icon is positioned oddly, or has padding built into the image itself. If that is the case copy the image and edit it to suit.
Or you can hack the offending icon with some CSS like so:
.fi-social-treehouse {
margin-top: -20px;
}
Well, I checked inside the CSS sheet for Foundation Icons and compared it to the CSS sheet of Font Awesome, and couldn't find a difference. So I ended up hard coding a negative margin to the column that the treehouse icon is within. If anyone has a better solution, I would be happy to hear it!
I need to create a star rating and I want it to look exactly as on the image (). I used google icon for stars and and for numeric value. However, I don't know how to align this value with icons so that the would be on the same line. For now "(50%)" are slightly below the baseline of star icons. I tried to display numeric value as a block and give to it margins and paddings, but this didn't help.
Here's my HTML by now:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star_border</i>
<span id="rating">(50%)</span>
Any help or trick-suggestions would be appreciated!
For some reason the icons are automatically aligned to the top. So if you use vertical-align: bottom; they will then have the same baseline as the text.
.star-wrapper i {
vertical-align: bottom;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="star-wrapper">
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star_border</i>
<span id="rating">(50%)</span>
</div>
I'm having a bit trouble with some font-awesome icons. I'm trying to increase the size of a few of them, but for some reason nothing I seem to do works.
Here is my html
<div class="span5 bookBuild">
<div class="well well-small">
<h4>Build your Book!</h4>
<div class="span2">
<i class="icon-file icon-large"></i>
</div><!--span2-->
<div class="span9">
<p>This is a paragraph</p>
</div><!--span9-->
<p class="clearfix"></p>
</div><!--well-->
</div><!--span5-->
and I have tried to add as you can see the icon-large class as well as the icon-2x class. None of the icon-2x - icon-4x are working.
I have also tried targeting the specific icon and then increasing the font size such as font-size: 3em;
Any help would be amazing!
we can make some icon bigger using font awesome. Font awesome provided a class to increse them.
To increase icon sizes relative to their container, use the fa-lg (33% increase), fa-2x, fa-3x, fa-4x, or fa-5x classes.
http://fortawesome.github.io/Font-Awesome/examples/
This worked for me in bootstrap ONLY after I added !important, like this:
.fa-big{font-size: 100px !important;}
Use icon-4x instead of icon-large. See here: http://bootply.com/79841
Font Awesome is a font so add a class and increase the font-size
.fa-big{
font-size: 100px;
}
<i class="fa fa-ship fa-big"></i>