css - E trernal Font Awesome 覆盖了我网站的 css 代码

Question

你好我正在使用https://use.fontawesome.com/releases/v5.0.7/css/all.css，我有一个奇怪的问题。

这是我的按钮：

<span class="fa fa-external-link-alt icona-link"></span>

CSS

.icona-link {
 float: right;
 font-size: 18px;
 width: 50px;
 min-height: 36px;
 background: #d9b560;
 display: -webkit-box !important;
 display: -ms-flexbox !important;
 display: flex !important;
 -webkit-box-pack: center;
 -ms-flex-pack: center;
 justify-content: center;
 -webkit-box-align: center;
 -ms-flex-align: center;
 align-items: center;
 border-radius: 8px 0px 0px 8px;
 border: 2px solid #d9b560;
 color: #fff;
 padding-left: 7px;
 cursor: pointer;
 height: 100%;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
}

但是 fontawesome 的外部来源添加了这个：

.fa {
   font-size: inherit;
   font: normal normal normal 14px/1 FontAwesome;
}

为什么 ？这是一个大问题，因为它覆盖了我的 css 代码......我该如何解决这个问题？

我希望你能帮助我，对不起我的英语。

非常感谢

标签： csscss-selectorsfont-awesome

Answer 1

如果您只是不想要来自外部源的属性，您可以在被覆盖的属性末尾添加 !important 或将它们设置为初始值。

所以，

.div {
font-size:20px!important;
}

or

.div {
font-size:initial!important;
}