フォントの素晴らしいアイコンの背景円を小さくするには？

Question

私は素晴らしいフォントを使用して、次の警告サインを生成する必要があります。

しかし、私は、余分なボーダーのように持っているので、それは正確にそれを作ることができないです：

これは私ですHTML：これは私のCSSで

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

（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

：

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>

Answer 2

修正はかなり簡単です。サークルのないアイコンのバージョンを使用し、サークルを手動で追加します。 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 3

を：固定

あなたの背景を描く：

012フレキシボックス使用

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

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