css - fontawesome 追加要素のスタイリング

Question

CSS に追加font-family: FontAwesome;すると、スタイルに以下が追加されます。

element.style {
border-bottom-width: 7px;
border-bottom-style: solid;
border-bottom-color: red;
color: rgb(255, 0, 0);
}

ここに私のスタイルシートがあります:

.addfavorite {
    padding: 5px;
    background-color: white;
    border-bottom: 1px solid gray;
}

.star {
    font-size: 20px;
    font-family: FontAwesome;
    padding-right: 5px;
    border-bottom-width: 0px!important;
}

.addfavorite span.star:before {
    content: "\f006";
    color: #999999;
}

.addfavorite span.star:hover:before, .addfavorite span.star:hover~span.star:before {
    content: "\f005";
    color: #e3cf7a;
}

スタイルを削除するとfont-family: FontAwesome;、もちろんスターを失います。

一時的な修正として追加border-bottom-width: 0px!importantしましたが、まだ「そこにある」という事実は気に入りません。

Html は次のとおりです。

<div class="addfavorite"><span class="star"></span> Add To Favorites</div>

何か案は？ありがとう！