我需要使用字体真棒生成以下警告标志: 如何在字体真棒图标中制作更小的背景圆圈?
这是我的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