Html 使用字体图标时字体会发生变化

我想使用文本旁边的图标，但每次我尝试使用Font Awesome中的图标时，它都会更改文本的字体样式。我应该怎么做才能使字体保持不变，即使我在其中包含了一个很棒的字体图标？这是我的密码：

jQuery（文档）.ready（函数（）{
var navOffset=jQuery（“.nav”）.offset（）.top；
jQuery（“.nav”）.wrap（“”）；
jQuery（“.nav占位符”）.height（jQuery（“.nav”）.outerHeight（））；
jQuery（窗口）.滚动（函数（）{
var scrollPos=jQuery（window.scrollTop（）；
如果（滚动位置>=导航偏移）{
jQuery（“.nav”）.addClass（“固定”）；
}否则{
jQuery（“.nav”）.removeClass（“固定”）；
}
});
});
body，
html{
身高：100%；
背景色：#F2F2；
边际：0px；
}
.视差{
背景图片：url（'images/bg.jpg'）；
身高：100%；
背景附件：固定；
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
}
.视差1{
背景图片：url（'images/bg.jpg'）；
身高：46%；
字号：0；
背景附件：固定；
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
}
标题{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
宽度：100%；
排名：0；
显示：块；
文本对齐：居中；
背景色：#0d0d；
}
.导航{
z指数：999；
}
.导航链接{
显示：内联块
}
.固定{
位置：固定；
排名：0；
宽度：100%；
背景色：#222422；
}
.导航占位符{
边距：0 0x 0；
}
.导航链接a{
字体系列：arial；
显示：块；
颜色：#F3；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
字体大小：15磅；
}
.导航链接a:悬停{
背景色：#f1f1；
颜色：#0d0d；
过渡时间：0.4s；
}
.标题{
位置：绝对位置；
左：0；
最高：50%；
宽度：100%；
文本对齐：居中；
颜色：#000；
}
.标题span.边框{
背景色：#111；
颜色：#fff；
填充：18px；
字体大小：25px；
字母间距：10px；
}
.img1{
边缘顶部：90像素；
边界半径：50px；
右边距：30px；
过渡：0.3s；
转换：所有.2易入易出；
}
.img1：悬停{
变换：比例（0.9）；
光标：指针；
}
#产品{
边际：0px；
字号：40pt；
}

欢迎







尝试将文本“Home”移出
标记

之前：
Home

之后：
Home