Изменение шрифта при использовании значка шрифта Awesome

Question

Я хотел бы использовать значки рядом с текстом, но каждый раз, когда я пытаюсь использовать значок из шрифта Awesome, он меняет стиль шрифта текста. Что делать, чтобы шрифт остался прежним, даже если я включил в него значок Font Awesome? Вот мой код:

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>

Как вы можете увидеть в навигационной панели, шрифт домашняя кнопка не отличается от остальных.

Answer 1

Попытка перемещения текста «Главная» из тега <i>.

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

После: <i class="fa fa-home w3-xxlarge"></i> Home