ブートストラップ4：左のアイコンが付いた応答ボタン

Question

私が何をしていても、ボタンはちょっと変わってきます。あまりにも複雑です。それは小さな画面で分割され、自然に動作しません。特に私はそれを列に入れるとき。誰かが私にこれを行うための正しい、きれいな方法を教えてもらえますか？ブートストラップ4のさまざまなコンポーネントに含めると、単純にできるだけ単純にする必要があります。

とにかく、ここに私のコードです。私はブートストラップ4とFontAwesomeを使用しています。私は意図的に列に配置しているので、たとえばテキストが正しく中央揃えされていないことがわかります。これは正しい方法ですか？

.btn { 
 
\t border: none; 
 
\t padding: 20px; 
 
     text-align: center; 
 
     font-size: 10px; 
 
\t display: inline-block; 
 
\t text-transform: uppercase; 
 
\t position: relative; 
 
     background: #42473d; 
 
\t color: #fff; 
 
    } 
 

 
.btn:before { 
 
\t font-family: 'FontAwesome'; 
 
    position: absolute; 
 
\t left: 0; 
 
\t top: 0; 
 
\t line-height: 2.9; 
 
\t font-size: 18px; 
 
\t width: 50px; 
 
    content: "\f09a"; 
 
    background-color: #292c26; 
 
}

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<div class="col-md-3 mb-2"> 
 
    <button class="btn btn-block rounded-0">View Using Facebook</button> 
 
</div> 
 

 
<div class="col-md-3"> 
 
    <button class="btn btn-block rounded-0">Sign in with Facebook</button> 
 
</div>

Answer 1

絶対位置決めが.btn:beforeこの場合には必要とされません。また、line-heightの代わりにpaddingを使用して領域を定義する必要があります。 leftとrightの代わりにmargin-leftとmargin-rightを調整します。

margin-bottomを.btnクラスに追加しました。必要がない場合は削除することができます。

.btn { 
 
    border: none; 
 
    padding: 20px; 
 
    text-align: center; 
 
    font-size: 10px; 
 
    display: inline-block; 
 
    text-transform: uppercase; 
 
    position: relative; 
 
    background: #42473d; 
 
    color: #fff; 
 
    margin-bottom: 5px; 
 
} 
 

 
.btn:before { 
 
    font-family: 'FontAwesome'; 
 
    font-size: 18px; 
 
    padding: 20px; 
 
    margin-left: -20px; 
 
    margin-right: 20px; 
 
    content: "\f09a"; 
 
    background-color: #292c26; 
 
}

<div class="col-md-3 mb-2"> 
 
    <button class="btn btn-block rounded-0">View Using Facebook</button> 
 
</div> 
 

 
<div class="col-md-3"> 
 
    <button class="btn btn-block rounded-0">Sign in with Facebook</button> 
 
</div>

[更新] 場合にボタンがbtn-blockです。 pxの代わりにem単位を使用することをお勧めします。 https://jsfiddle.net/mr6nt5no/4/