我已将“Font Awesome”字体升级到版本 5,然后应用程序中的图标消失了。我还有旧的 js 用于向后兼容,但我的复选框不再有图标。
老实说,我不知道这次升级到底发生了什么变化。
谁能帮帮我?
工作 fiddle
.checkbox {
padding-left: 20px;
}
.checkbox label {
display: inline-block;
position: relative;
padding-left: 5px;
}
.checkbox label::before {
content: "";
display: inline-block;
position: absolute;
width: 17px;
height: 17px;
left: 0;
margin-left: -20px;
border: 1px solid #cccccc;
border-radius: 3px;
background-color: #fff;
-webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
-o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
}
.checkbox label::after {
display: inline-block;
position: absolute;
width: 16px;
height: 16px;
left: 0;
top: 0;
margin-left: -20px;
padding-left: 3px;
padding-top: 1px;
font-size: 11px;
color: #555555;
}
.checkbox input[type="checkbox"] {
opacity: 0;
}
.checkbox input[type="checkbox"]:focus+label::before {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.checkbox input[type="checkbox"]:checked+label::after {
font-family: 'FontAwesome';
content: "\f00c";
}
.checkbox.error-checkbox input[type="checkbox"]:checked+label::after {
content: "\f00d";
}
.checkbox input[type="checkbox"]:disabled+label {
opacity: 0.65;
}
.checkbox input[type="checkbox"]:disabled+label::before {
background-color: #eeeeee;
cursor: not-allowed;
}
.checkbox.checkbox-circle label::before {
border-radius: 50%;
}
.checkbox.checkbox-inline {
margin-top: 0;
}
.checkbox-primary input[type="checkbox"]:checked+label::before {
background-color: #062f4f;
border-color: #062f4f;
}
.checkbox-primary input[type="checkbox"]:checked+label::after {
color: #fff;
}
.checkbox-danger input[type="checkbox"]:checked+label::before {
background-color: #d9534f;
border-color: #d9534f;
}
.checkbox-danger input[type="checkbox"]:checked+label::after {
color: #fff;
}
.checkbox-info input[type="checkbox"]:checked+label::before {
background-color: #5bc0de;
border-color: #5bc0de;
}
.checkbox-info input[type="checkbox"]:checked+label::after {
color: #fff;
}
.checkbox-warning input[type="checkbox"]:checked+label::before {
background-color: #f0ad4e;
border-color: #f0ad4e;
}
.checkbox-warning input[type="checkbox"]:checked+label::after {
color: #fff;
}
.checkbox-success input[type="checkbox"]:checked+label::before {
background-color: #5cb85c;
border-color: #5cb85c;
}
.checkbox-success input[type="checkbox"]:checked+label::after {
color: #fff;
}
.radio {
padding-left: 20px;
}
.radio label {
display: inline-block;
position: relative;
padding-left: 5px;
}
.radio label::before {
content: "";
display: inline-block;
position: absolute;
width: 17px;
height: 17px;
left: 0;
margin-left: -20px;
border: 1px solid #cccccc;
border-radius: 50%;
background-color: #fff;
-webkit-transition: border 0.15s ease-in-out;
-o-transition: border 0.15s ease-in-out;
transition: border 0.15s ease-in-out;
}
.radio label::after {
display: inline-block;
position: absolute;
content: " ";
width: 11px;
height: 11px;
left: 3px;
top: 3px;
margin-left: -20px;
border-radius: 50%;
background-color: #555555;
-webkit-transform: scale(0, 0);
-ms-transform: scale(0, 0);
-o-transform: scale(0, 0);
transform: scale(0, 0);
-webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
-moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
-o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
}
.radio input[type="radio"] {
opacity: 0;
}
.radio input[type="radio"]:focus+label::before {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.radio input[type="radio"]:checked+label::after {
-webkit-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-o-transform: scale(1, 1);
transform: scale(1, 1);
}
.radio input[type="radio"]:disabled+label {
opacity: 0.65;
}
.radio input[type="radio"]:disabled+label::before {
cursor: not-allowed;
}
.radio.radio-inline {
margin-top: 0;
}
.radio-primary input[type="radio"]+label::after {
background-color: #092756;
}
.radio-primary input[type="radio"]:checked+label::before {
border-color: #092756;
}
.radio-primary input[type="radio"]:checked+label::after {
background-color: #092756;
}
.radio-danger input[type="radio"]+label::after {
background-color: #d9534f;
}
.radio-danger input[type="radio"]:checked+label::before {
border-color: #d9534f;
}
.radio-danger input[type="radio"]:checked+label::after {
background-color: #d9534f;
}
.radio-info input[type="radio"]+label::after {
background-color: #092756;
}
.radio-info input[type="radio"]:checked+label::before {
border-color: #092756;
}
.radio-info input[type="radio"]:checked+label::after {
background-color: #092756;
}
.radio-warning input[type="radio"]+label::after {
background-color: #f0ad4e;
}
.radio-warning input[type="radio"]:checked+label::before {
border-color: #f0ad4e;
}
.radio-warning input[type="radio"]:checked+label::after {
background-color: #f0ad4e;
}
.radio-success input[type="radio"]+label::after {
background-color: #5cb85c;
}
.radio-success input[type="radio"]:checked+label::before {
border-color: #5cb85c;
}
.radio-success input[type="radio"]:checked+label::after {
background-color: #5cb85c;
}
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<div class="checkbox checkbox-primary">
<input type="checkbox" id="coreBanking" name="hasHost" checked="" disabled="">
<label for="coreBanking">Core banking</label>
</div>
最佳答案
这里有很多地方需要改变。
您正在加载 JS 文件,但如果您在伪元素中包含图标,则最好使用 CSS 链接。
字体名称已从
'FontAwesome'
更改为Font Awesome\5 Free
,您需要添加font-weight: 900
图标也会出现。
这是一个工作示例:
.checkbox {
padding-left: 20px;
}
.checkbox label {
display: inline-block;
position: relative;
padding-left: 5px;
}
.checkbox label::before {
content: "";
display: inline-block;
position: absolute;
width: 17px;
height: 17px;
left: 0;
margin-left: -20px;
border: 1px solid #cccccc;
border-radius: 3px;
background-color: #fff;
-webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
-o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
}
.checkbox label::after {
display: inline-block;
position: absolute;
width: 16px;
height: 16px;
left: 0;
top: 0;
margin-left: -20px;
padding-left: 4px;
padding-top: 4px;
font-size: 11px;
color: #555555;
}
.checkbox input[type="checkbox"] {
opacity: 0;
}
.checkbox input[type="checkbox"]:focus+label::before {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.checkbox input[type="checkbox"]:checked+label::after {
font-family: Font Awesome\ 5 Free;
content: "\f00c";
font-weight: 900;
}
.checkbox.error-checkbox input[type="checkbox"]:checked+label::after {
content: "\f00d";
font-weight: 900;
}
.checkbox input[type="checkbox"]:disabled+label {
opacity: 0.65;
}
.checkbox input[type="checkbox"]:disabled+label::before {
background-color: #eeeeee;
cursor: not-allowed;
}
.checkbox.checkbox-circle label::before {
border-radius: 50%;
}
.checkbox.checkbox-inline {
margin-top: 0;
}
.checkbox-primary input[type="checkbox"]:checked+label::before {
background-color: #062f4f;
border-color: #062f4f;
}
.checkbox-primary input[type="checkbox"]:checked+label::after {
color: #fff;
}
.checkbox-danger input[type="checkbox"]:checked+label::before {
background-color: #d9534f;
border-color: #d9534f;
}
.checkbox-danger input[type="checkbox"]:checked+label::after {
color: #fff;
}
.checkbox-info input[type="checkbox"]:checked+label::before {
background-color: #5bc0de;
border-color: #5bc0de;
}
.checkbox-info input[type="checkbox"]:checked+label::after {
color: #fff;
}
.checkbox-warning input[type="checkbox"]:checked+label::before {
background-color: #f0ad4e;
border-color: #f0ad4e;
}
.checkbox-warning input[type="checkbox"]:checked+label::after {
color: #fff;
}
.checkbox-success input[type="checkbox"]:checked+label::before {
background-color: #5cb85c;
border-color: #5cb85c;
}
.checkbox-success input[type="checkbox"]:checked+label::after {
color: #fff;
}
.radio {
padding-left: 20px;
}
.radio label {
display: inline-block;
position: relative;
padding-left: 5px;
}
.radio label::before {
content: "";
display: inline-block;
position: absolute;
width: 17px;
height: 17px;
left: 0;
margin-left: -20px;
border: 1px solid #cccccc;
border-radius: 50%;
background-color: #fff;
-webkit-transition: border 0.15s ease-in-out;
-o-transition: border 0.15s ease-in-out;
transition: border 0.15s ease-in-out;
}
.radio label::after {
display: inline-block;
position: absolute;
content: " ";
width: 11px;
height: 11px;
left: 3px;
top: 3px;
margin-left: -20px;
border-radius: 50%;
background-color: #555555;
-webkit-transform: scale(0, 0);
-ms-transform: scale(0, 0);
-o-transform: scale(0, 0);
transform: scale(0, 0);
-webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
-moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
-o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
}
.radio input[type="radio"] {
opacity: 0;
}
.radio input[type="radio"]:focus+label::before {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.radio input[type="radio"]:checked+label::after {
-webkit-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-o-transform: scale(1, 1);
transform: scale(1, 1);
}
.radio input[type="radio"]:disabled+label {
opacity: 0.65;
}
.radio input[type="radio"]:disabled+label::before {
cursor: not-allowed;
}
.radio.radio-inline {
margin-top: 0;
}
.radio-primary input[type="radio"]+label::after {
background-color: #092756;
}
.radio-primary input[type="radio"]:checked+label::before {
border-color: #092756;
}
.radio-primary input[type="radio"]:checked+label::after {
background-color: #092756;
}
.radio-danger input[type="radio"]+label::after {
background-color: #d9534f;
}
.radio-danger input[type="radio"]:checked+label::before {
border-color: #d9534f;
}
.radio-danger input[type="radio"]:checked+label::after {
background-color: #d9534f;
}
.radio-info input[type="radio"]+label::after {
background-color: #092756;
}
.radio-info input[type="radio"]:checked+label::before {
border-color: #092756;
}
.radio-info input[type="radio"]:checked+label::after {
background-color: #092756;
}
.radio-warning input[type="radio"]+label::after {
background-color: #f0ad4e;
}
.radio-warning input[type="radio"]:checked+label::before {
border-color: #f0ad4e;
}
.radio-warning input[type="radio"]:checked+label::after {
background-color: #f0ad4e;
}
.radio-success input[type="radio"]+label::after {
background-color: #5cb85c;
}
.radio-success input[type="radio"]:checked+label::before {
border-color: #5cb85c;
}
.radio-success input[type="radio"]:checked+label::after {
background-color: #5cb85c;
}
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<div class="checkbox checkbox-primary">
<input type="checkbox" id="coreBanking" name="hasHost" checked="" disabled="">
<label for="coreBanking">Core banking</label>
</div>
关于javascript - 将字体 ‘Font Awesome’ 升级到版本 5 后图标消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48580618/