html - 如何缩小 Font Awesome 图标中的背景圆圈？

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

使用 flexbox :

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;
}

<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>