如何在字体真棒图标中缩小背景圈？

Question

我需要使用Font Awesome生成以下警告标志：

然而，我无法完全按原样制作，因为我喜欢额外的边框：

这是我的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链接。

Answer 1

修复非常简单。使用没有圆圈的图标版本，然后手动添加圆圈。

修正：codepen.io/anon/pen/JJoZVo?editors=1100

<强> HTML

<div role="alert" class="alert alert-dismissible">
  <i id="exclamation-mark" class="fa fa-exclamation 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

$color-secondary-1: #db2b4b;

p > span {
  font-weight: bold;
}

div {
  color: white;
  text-align: center;
  background-color: $color-secondary-1;

  i {
    color: white;
    background: #ff91a5;
    border-radius: 50%;
    padding:10px;
    height: 1em;
    width: 1em;
  }
}

.extraClass{ 
     font-size: 2em; 
}

Answer 2

您可以使用径向渐变来绘制背景：

background: radial-gradient(circle at center,white 20px,transparent 20px) no-repeat center;

＆＃13;

＆＃13;

p > span {
  font-weight: bold;
}

div {
  color: white;
  text-align: center;
  background-color: #db2b4b;
}
div i {
  font-size: 50px!important;/* for demo purpose in the snippet on SO */
  color: #ff91a5;
  background: radial-gradient(circle at center, #ffffff 20px, rgba(0, 0, 0, 0) 20px) no-repeat center;
  border-radius: 50%;
  height: 1em;
  width: 1em;
}

.extraClass {
  font-size: 3em;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

使用flexbox：

＆＃13;

＆＃13;

div {
  color: white;
  text-align: center;
  background-color: #db2b4b;
}

#exclamation-mark {
  font-size: 80px;
  color: white;
  background: #ff91a5;
  border-radius: 50%;
  padding:8px;
  margin: 5px 20px;
  height: 1em;
  width: 1em;
}

.extraClass{ 
     font-size:3em; 
}

#close {
  font-size: 80px;
  color: white;
  background: #transparent;
  border-radius: 50%;
  padding:8px;
  margin: 5px 20px;
  height: 1em;
  width: 1em;
}

.alert {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

p{
  line-height: 0.8em;
}

p.bold {
  font-weight: bold;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div role="alert" class="alert alert-dismissible">
  <i id="exclamation-mark" class="fa fa-exclamation extraClass" aria-hidden="true"></i>
  <div>
  <p class="bold">Oops! Something went horribly wrong.</p>
  <p>We’re really sorry. Please try that again.</p>
  </div>
  <i id="close" class="fa fa-close extraClass" aria-hidden="true"></i>
</div>

＆＃13;

＆＃13;

＆＃13;