我需要使用字體真棒生成以下警告標誌: 如何在字體真棒圖標中製作更小的背景圓圈?
這是我的HTML:
<div role="alert" class="alert alert-dismissible">
<i id="exclamation-mark" class="fa fa-exclamation-circle extraClass" aria-hidden="true"></i>
<p style="display: inline;vertical-align: middle">
<span>Oops! Something went horribly wrong. </span> We’re really sorry. Please try that again.
</p>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
×
</button>
</div>
這是我的CSS(SCSS):
$color-secondary-1: #db2b4b;
p > span {
font-weight: bold;
}
div {
color: white;
text-align: center;
background-color: $color-secondary-1;
i {
font-size: 100px;
color: #ff91a5;
background: white;
border-radius: 50%;
height: 1em;
width: 1em;
}
}
.extraClass{
font-size:3em;
}
This是我的CodePen鏈接。
@Korgrue,我只是做了細微的變化,但它是我想要的。你可以提供一個答案,解釋你爲解決這個問題做了什麼,以防萬一你想要。 – lmiguelvargasf