Have Two Font Awesome Icons Side by Side - html

I'm trying to have two Font Awesome icons side by side, but it's not working. They're on top of each other.
Here's my code:
<i class="fa fa-facebook-square fa-3x" aria-hidden="true"></i>
<i class="fa fa-youtube fa-3x" aria-hidden="true"></i>
I've tried setting my a and i tags as display: inline;

If you want to do it using CSS, the above way would be recommended.
However, if you want to do it an easier way using HTML you can do it by using a table
i{
padding: 5px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<table>
<tr>
<td><i class="fa fa-facebook-square fa-3x" aria-hidden="true"></i></td><td><i class="fa fa-phone fa-3x" aria-hidden="true"></i></td>
</tr>
</table>

Related

CSS not applying on icons

I'm watching Traversy Media's SASS Course, and I've got this problem with my icon colour not applying. Here's my HTML:
Does anyone know why the #fff colour isn't applying to my icons?
.icons a {
color: pink;
margin: 0 0.3rem;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="icons my-1">
<i class="fas fa-globe fa-2x"></i>
<i class="fab fa-twitter fa-2x"></i>
<i class="fab fa-facebook fa-2x"></i>
<i class="fab fa-linkedin fa-2x"></i>
<i class="fab fa-instagram fa-2x"></i>
</div>
You're applying the color to the surround <a> tag, to apply the effect to the inner <i> field you need the following CSS selector:
.icons a i {
color: #fff
}
Otherwise the selector is trying to change the color of the anchor itself, which has no color.
You need to apply the color to the element
.icons a i {
color: #fff;
}
try this:
.icons.my-1 a {
color: white;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="icons my-1">
<i class="fas fa-globe fa-2x"></i>
<i class="fab fa-twitter fa-2x"></i>
<i class="fab fa-facebook fa-2x"></i>
<i class="fab fa-linkedin fa-2x"></i>
<i class="fab fa-instagram fa-2x"></i>
</div>
I don't know why, but nothing was working out, anyways thanks for your help, I just copy pasted the source code from Traversy Media's YouTube Video which is extremely frustrating but can't be helped! Thanks!!

I am facing indentation issues when applying icon and text in my html list .How do I properly indent the items?

My html code:
<ul>
<li><i class="fa fa-shopping-cart" aria-hidden="true" ></i>Orders</li>
<li><i class=' fa fa-address-book' aria-hidden="true" ></i> Dashboard</li>
<li><i class="fa fa-cube" aria-hidden="true" ></i> Products</li>
<li><i class="fa fa-gear" aria-hidden="true" ></i> Seller Section</li>
<li><i class="fa fa-dollar" aria-hidden="true"style ="font-size: 40px;" ></i> Sales</li>
<li><i class='fa fa-user' aria-hidden="true" ></i> Customers</li>
<li class="active"><i class='fa fa-user-circle' aria-hidden="true" ></i> Admin</li>
<li ><i class="fa fa-arrow-circle-left" aria-hidden="true" ></i> Return</li>
</ul>
Any help would be appeciated
The easiest solution is simply to precise a fixed width for your icons i in your CSS.
Some quite important corrections:
I removed the font-size: 40px; for the dollar sign, it was really bigger than others, I doubt it was on purpose
There should be no spaces between the closing </i> and the opening of <a ..., or at least it should be the same number of spaces for each one (because they are displayed as spaces)
Some advices:
I choose a width larger than the icon size so that there is a little horizontal space between the icons and the links
You can control the vertical spacing with the icon's height. I choose 20 for a little more spacing
You can control the icons size with font-size (because they are actually text characters) but i needs the !important because with the class fa it is set to inherit (do this only if you need another font size than the links, because with inherit it will follow the font size set on the li). Adjust all those dimensions as you like
To hide the discs that come with the list, just add list-style: none; to the li
by default, a top and bottom margin are set on the ul, and a left padding, you can values to control them
i {
width: 20px;
height: 20px;
font-size: 16px !important;
}
li {
list-style: none;
}
ul {
margin-top: 10px;
margin-bottom: 0;
padding-left: 20px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<ul>
<li><i class="fa fa-shopping-cart" aria-hidden="true" ></i>Orders</li>
<li><i class=' fa fa-address-book' aria-hidden="true" ></i>Dashboard</li>
<li><i class="fa fa-cube" aria-hidden="true" ></i>Products</li>
<li><i class="fa fa-gear" aria-hidden="true" ></i>Seller Section</li>
<li><i class="fa fa-dollar" aria-hidden="true"></i>Sales</li>
<li><i class='fa fa-user' aria-hidden="true" ></i>Customers</li>
<li class="active"><i class='fa fa-user-circle' aria-hidden="true" ></i>Admin</li>
<li ><i class="fa fa-arrow-circle-left" aria-hidden="true" ></i>Return</li>
</ul>
Check this code:
<!DOCTYPE html>
<html>
<head>
<title>Awesome List</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.nav-list-item {
margin-left:5px;
}
#active-nav-list-item{
color:red;
}
</style>
</head>
<body>
<table>
<tr>
<td><i class="fa fa-shopping-cart" aria-hidden="true"></i></td>
<td><a class="nav-list-item" href="order.html">Orders</a></td>
</tr>
<tr>
<td><i class=' fa fa-address-book' aria-hidden="true"></i></td>
<td><a class="nav-list-item" href="dashboard.html">Dashboard</a></td>
</tr>
<tr>
<td><i class="fa fa-cube" aria-hidden="true"></i></td>
<td><a class="nav-list-item" href="products.html">Products</a></td>
</tr>
<tr>
<td><i class="fa fa-gear" aria-hidden="true"></i></td>
<td><a class="nav-list-item" href="SellerSection.html">Seller Section</a></td>
</tr>
<tr>
<td><i class="fa fa-dollar" aria-hidden="true"></i></td>
<td><a class="nav-list-item" href="sales.html">Sales</a></td>
</tr>
<tr>
<td><i class='fa fa-user' aria-hidden="true"></i></td>
<td><a class="nav-list-item" href="customer.html">Customers</a></td>
</tr>
<tr>
<td><i class='fa fa-user-circle' id="active-nav-list-item" aria-hidden="true"></i></td>
<td><a class="nav-list-item" id="active-nav-list-item" href="admin.html">Admin</a></td>
</tr>
<tr>
<td><i class="fa fa-arrow-circle-left" aria-hidden="true"></i></td>
<td><a class="nav-list-item" href="return.html">Return</a></td>
</tr>
</table>
</body>
</html>
Here I used <table> and its related tags to keep items in proper indentation using html tables. Also added a CSS class .nav-list-item to indent list items a bit away from their respective icons. Finally, I added an CSS id #active-nav-list-item to highlight the active item.

Facebook and Twitter icons don't work, others do

Font Awesome is installed, and most icons work. Facebook and Twitter icons, however, do not.
I have tried changing the fa class to fab, and vice versa: neither work.
Here is the code. The top icon renders correctly:
info#site.org <i class="fas fa-envelope" style="margin-left: 5px"></i><br />
#site <i class="fab fa-twitter" style="margin-left: 5px"></i><br />
site <i class="fa fa-facebook" style="margin-left: 5px"></i>
Any suggestions on how to get the social icons working is greatly appreciated!
Fix: This was just a case of not having updated FontAwesome to the latest version, so the icon references were broken. Easy mistake! Hopefully this helps someone.
Icons work properly. Probably you made an error somewhere.
<i class="fab fa-3x fa-facebook"></i>
<i class="fab fa-3x fa-facebook-f"></i>
<i class="fab fa-3x fa-facebook-square"></i>
<i class="fab fa-3x fa-twitter"></i>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/js/all.min.js"></script>

Stacking fa-circle-o and other icons whilst maintaining vertical and horizontal alignment

I'm attempting to stack two icons. My attempt looks awful, because the central icon isn't centred within the fa-circle-o.
<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">
<i class="fa fa-th-large fa-stack-1x"></i>
<i class="fa fa-circle-o fa-stack-2x"></i>
</span>
Is there a nice way to resolve this within the stacking system provided by font awesome?
As far as I know, you can't solve that using font-awesome classes, but you can do a very simple styling applying margin-top: 1px
<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">
<i class="fa fa-th-large fa-fw fa-stack-1x" style="margin-top: 1px"></i>
<i class="fa fa-circle-o fa-fw fa-stack-2x"></i>
</span>

Font Awesome icon size not increasing

I have Font Awesome icons installed on this site. The icons size isn't increasing even after adding the class to increase size.
<ul class="stay-connected-inner list-inline">
<li><i class="fa fa-twitter fa-3" aria-hidden="true"></i></li>
<li><i class="fa fa-linkedin fa-3" aria-hidden="true"></i></li>
<li><i class="fa fa-medium fa-3" aria-hidden="true"></i></li>
<li><i class="fa fa-linkedin fa-3" aria-hidden="true"></i></li>
</ul>
To increase icon sizes relative to their container, use the fa-lg (33% increase), fa-2x, fa-3x, fa-4x, or fa-5x classes.
<ul class="stay-connected-inner list-inline">
<li><i class="fa fa-twitter fa-3x" aria-hidden="true"></i></li>
<li><i class="fa fa-linkedin fa-3x" aria-hidden="true"></i></li>
<li><i class="fa fa-medium fa-3x" aria-hidden="true"></i></li>
<li><i class="fa fa-linkedin fa-3x" aria-hidden="true"></i></li>
</ul>
font-awesome icons are texts. So use font-size to increase the size of font-awesome icons.
For eg.,
i {
font-size: 18px;
}
For font awesome icons sizing please check this link.
http://fontawesome.io/examples/
To increase icon sizes relative to their container, use the fa-lg (33% increase), fa-2x, fa-3x, fa-4x, or fa-5x classes.
<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x
I had the same problem. For some reason the fa class is overriding the fa-2x class on the awesome font library. I found a blog that they knew it was an issue back in 2014 but haven't addressed it yet. On my site I added the style class again and added !important which fixed my problem.
<style>
.fa-2x{
font-size:2em !important;
};
</style>
use following inline css
<style type="text/css">
.fa-3{
font-size: 30px;
}
</style>
if you are using font awesome or font awesome pro icons in Angular 5+ using svg with Javascript. The easy way to increase your custom font size is:
.svg-inline--fa{
font-size:1.500em; //use your custom font size. If you do not want to apply the font awesome size classes
}
Apply this in your custom component to see the changes immediately.
In my case setting fa fa-5x, or font-size or height didn't help, but:
width: 20px !important; // 20px is an example value
Also be cautious if you have padding applied!