markaugustine markaugustine - 14 days ago 5
CSS Question

Font changes when using Font Awesome icon

I'd like to use the icons beside a text, but every time I try to use an icon from Font Awesome, it changes the font style of the text. What should I do in order for the font to stay the same even if I include a Font Awesome icon into it? Here's my code:



jQuery(document).ready(function() {

var navOffset = jQuery(".nav").offset().top;

jQuery(".nav").wrap('<div class="nav-placeholder"></div>');
jQuery(".nav-placeholder").height(jQuery(".nav").outerHeight());

jQuery(window).scroll(function() {

var scrollPos = jQuery(window).scrollTop();

if (scrollPos >= navOffset) {
jQuery(".nav").addClass("fixed");
} else {
jQuery(".nav").removeClass("fixed");
}

});

});

body,
html {
height: 100%;
background-color: #f2f2f2;
margin: 0px;
}
.parallax {
background-image: url('images/bg.jpg');
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.parallax1 {
background-image: url('images/bg.jpg');
height: 46%;
font-size: 0;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
ul.header {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
top: 0;
display: block;
text-align: center;
background-color: #0d0d0d;
}
.nav {
z-index: 999;
}
.navlink {
display: inline-block
}
.fixed {
position: fixed;
top: 0;
width: 100%;
background-color: #222422;
}
.nav-placeholder {
margin: 0 0 0x 0;
}
.navlink a {
font-family: arial;
display: block;
color: #f3f3f3;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 15pt;
}
.navlink a:hover {
background-color: #f1f1f1;
color: #0d0d0d;
transition-duration: 0.4s;
}
.caption {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
color: #000;
}
.caption span.border {
background-color: #111;
color: #fff;
padding: 18px;
font-size: 25px;
letter-spacing: 10px;
}
.img1 {
margin-top: 90px;
border-radius: 50px;
margin-right: 30px;
transition: 0.3s;
transition: all .2s ease-in-out;
}
.img1:hover {
transform: scale(0.9);
cursor: pointer;
}
#products {
margin: 0px;
font-size: 40pt;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div class="parallax"></div>

<div class="caption">
<span class="border"> WELCOME </span>
</div>

<div class="nav">
<ul class="header">
<ul class="header-content">
<li class="navlink"><a href="{{ route('beverage_main') }}"><i class="fa fa-home w3-xxlarge"> Home</i></a></li>
<li class="navlink"><a href="{{ route('beverage_foods') }}"> Foods </a></li>
<li class="navlink"><a href="#"> Beverages </a></li>
</ul>
</ul>
</div>

<div style="height:auto;background-color:#f2f2f2;font-size:36px;text-align:center;">
<img class="img1" src="images/sw.jpg" width="350px" height="607px">
<img class="img1" src="images/cake.jpg" width="350px" height="607px">
<img class="img1" src="images/pizza.jpg" width="350px" height="607px">
</div>





As you can see in the navigation bar, the HOME button's font is different from the rest.

Answer

Trying moving the text "Home" out of the <i> tag.

Before: <i class="fa fa-home w3-xxlarge"> Home</i>

After: <i class="fa fa-home w3-xxlarge"></i> Home