Font Awesomeとは？
Font AwesomはWebサイトにアイコンフォントを簡単に表示させることができるWebサービスです。 提供されているアイコンフォントは商用利用可能です。また、名前にフォントとあるようにフォント同様にサイズ・色変更をCSSで調整することができます。使い方は簡単で、CDNを使って読み込むだけです。
以下の例ではWebアプリケーションでよく使われるアイコンを30個ご紹介しています。また、アイコンをBootStrap5のボタンと組み合わせています。さらに、グリッドシステムを利用して、各ボタンを整列させています。これにより、レスポンシブなデザインになり、画面サイズに応じてレイアウトが自動的に調整されます。各ボタンはそれぞれ col-* クラスを含む div タグ内に配置されています。
col-sm-4 を使用して、スモール（sm）サイズ以上のデバイスでは各行に3つのボタンが表示されるようにしています。また、my-1 というクラスを追加してY軸方向（上下）にマージンを追加し、ボタン間に少しスペースを作っています。そして、w-100 クラスを使用してボタンが親の div タグ全体を使用するようにしています。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>font-awesome-icons-with-buttons.html</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Font Awesome -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
</head>
<body>
<div class="container my-4">
<div class="row">
<div class="col-sm-4 my-1"><button class="btn btn-primary w-100"><i class="fas fa-save"></i> 保存</button></div>
<div class="col-sm-4 my-1"><button class="btn btn-secondary w-100"><i class="fas fa-download"></i> ダウンロード</button></div>
<div class="col-sm-4 my-1"><button class="btn btn-success w-100"><i class="fas fa-upload"></i> アップロード</button></div>
<div class="col-sm-4 my-1"><button class="btn btn-danger w-100"><i class="fas fa-trash"></i> 削除</button></div>
<div class="col-sm-4 my-1"><button class="btn btn-warning w-100"><i class="fas fa-edit"></i> 編集</button></div>
<div class="col-sm-4 my-1"><button class="btn btn-info w-100"><i class="fas fa-search"></i> 検索</button></div>
<div class="col-sm-4 my-1"><button class="btn btn-dark w-100"><i class="fas fa-envelope"></i> メッセージ</button></div>
<div class="col-sm-4 my-1"><button class="btn btn-light w-100"><i class="fas fa-check"></i> 承認</button></div>
<div class="col-sm-4 my-1"><button class="btn btn-primary w-100"><i class="fas fa-times"></i> キャンセル</button></div>
<div class="col-sm-4 my-1"><button class="btn btn-secondary w-100"><i class="fas fa-plus"></i> 追加</button></div>
<div class="col-sm-4 my-1"><button class="btn btn-primary w-100"><i class="fas fa-sync"></i> 更新</button></div>
<div class="col-sm-4 my-1"><button class="btn btn-secondary w-100"><i class="fas fa-exclamation-triangle"></i> 警告</button></div>
<div class="col-sm-4 my-1"><button class="btn btn-success w-100"><i class="fas fa-info-circle"></i> 情報</button></div>
<div class="col-sm-4 my-1"><button class="btn btn-danger w-100"><i class="fas fa-ban"></i> 禁止</button></div>
<div class="col-sm-4 my-1"><button class="btn btn-warning w-100"><i class="fas fa-undo"></i> 戻る</button></div>
<div class="col-sm-4 my-1"><button class="btn btn-info w-100"><i class="fas fa-redo"></i> 進む</button></div>
<div class="col-sm-4 my-1"><button class="btn btn-dark w-100"><i class="fas fa-home"></i> ホーム</button></div>
<div class="col-sm-4 my-1"><button class="btn btn-light w-100"><i class="fas fa-print"></i> 印刷</button></div>
<div class="col-sm-4 my-1"><button class="btn btn-primary w-100"><i class="fas fa-question-circle"></i> ヘルプ</button></div>
<div class="col-sm-4 my-1"><button class="btn btn-secondary w-100"><i class="fas fa-lock"></i> ロック</button></div>
<div class="col-sm-4 my-1"><button class="btn btn-primary w-100"><i class="fas fa-sign-out-alt"></i> ログアウト</button></div>
<div class="col-sm-4 my-1"><button class="btn btn-secondary w-100"><i class="fas fa-user-plus"></i> ユーザー追加</button></div>
<div class="col-sm-4 my-1"><button class="btn btn-success w-100"><i class="fas fa-users"></i> ユーザー一覧</button></div>
<div class="col-sm-4 my-1"><button class="btn btn-danger w-100"><i class="fas fa-user-times"></i> ユーザー削除</button></div>
<div class="col-sm-4 my-1"><button class="btn btn-warning w-100"><i class="fas fa-user-edit"></i> ユーザー編集</button></div>
<div class="col-sm-4 my-1"><button class="btn btn-info w-100"><i class="fas fa-cog"></i> 設定</button></div>
<div class="col-sm-4 my-1"><button class="btn btn-dark w-100"><i class="fas fa-chart-bar"></i> 統計</button></div>
<div class="col-sm-4 my-1"><button class="btn btn-light w-100"><i class="fas fa-camera"></i> 写真撮影</button></div>
<div class="col-sm-4 my-1"><button class="btn btn-primary w-100"><i class="fas fa-video"></i> ビデオ撮影</button></div>
<div class="col-sm-4 my-1"><button class="btn btn-secondary w-100"><i class="fas fa-music"></i> 音楽再生</button></div>
</div>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
</body>
</html>