web-dev-qa-db-ja.com

bootstrap 4：アイコンとテキスト付きのボタン

Bootstrap 4を使用して、以下に示すようなボタンを作成しようとしています。

enter image description here

アイコン（素晴らしいフォント）はテキストの中央に配置する必要があり、すべてのアイコンは画面上で同じy位置になります。ボタンの境界線は非表示にする必要があります。

ボタンを使用する必要がありますか、それとも別の要素を使用する方が良いですか？どんな助けでも大歓迎です。

htmlcsstwitter-bootstrapbootstrap-4
5
netshark1000

Bootstrap 4およびFont-Awesomeで、アイコンをテキストの左側に配置する場合は、次のスニペットを使用します

<button class="btn btn-lg" style="background-color:transparent;">
   <i class="fa fa-pencil"></i> Edit
</button>
19
Nitin Kamate

divを作成し、そこにfont-awesomeアイコンを挿入してテキストを記述し、必要なcssを指定すると、divで(click)イベントを使用できます。

Install bootstrap and font-awesome

そして、angular-cli.jsonの「スタイル」にパスを指定します。または、

<button class='btn btn-lg ' style='background-color:transparent;'> 
  <div style='text-align:center;'><i class="fa fa-times"></i></div>  
    Cancel Reservation
</button>
5
Manzer