Laravel8.x + Bootstrap + FontAwesomeを使う

スポンサーリンク
WEB開発

Bootstrapを使えるようにする

Bootstrapを使えるようにするのは簡単です。

Composerを使ってインストール

composer require laravel/ui

artisanコマンドを実行

php artisan ui bootstrap

すると以下のような文言が出てくると思いますので言われた通りコマンドを打ち込みます。

Bootstrap scaffolding installed successfully.
Please run "npm install && npm run dev" to compile your fresh scaffolding.
npm install && npm run dev

cssとjsを読み込む

htmlのheadタグ内に以下の一行を追加してください。

<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script src="{{ asset('js/app.js') }}"></script>

試してみる

さてちゃんと読み込めているかどうか試してみましょう。

ボタンを出してみます。

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>
こうなったら成功

FontAwesome 5.x.xを使えるようにする

npmコマンドでインストールする

npm install @fortawesome/fontawesome-free

上記のコマンドを実施後以下のように出てきます。

> @fortawesome/fontawesome-free@5.15.1 postinstall /Volumes/外付けHDD/hp/summons/node_modules/@fortawesome/fontawesome-free
> node attribution.js

Font Awesome Free 5.15.1 by @fontawesome - https://fontawesome.com
License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)

+ @fortawesome/fontawesome-free@5.15.1
added 1 package from 6 contributors and audited 1088 packages in 5.534s

48 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

/resources/sass/app.scss に追記

/resources/sass/app.scssに以下を追加。

// Font Awesome
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/brands';

コンパイル

コンパイルするために以下のコマンドを実行。

npm run prod

npm run prod でエラーになった場合

npm run dev

HTMLで読み込む

htmlのheadタグに以下の一行を記載します。

<link type="text/css" rel="stylesheet" href="{{ mix('css/app.css') }}">

するといつものように使えます。

<i class="fas fa-address-card"></i>

暇な時間にU-NEXT

今なら無料1ヶ月無料トライアル600円分の有料コンテンツを使えるチャンス!

見放題作品が31日間無料で視聴可能最新作はレンタル配信!

600円分のポイントプレゼント!DVD・ブルーレイよりも先行配信の最新作、放送中ドラマの視聴や最新コミックの購入に使用可能

 

追加料金なく、80誌以上の雑誌が読み放題

WEB開発
スポンサーリンク
uediveをフォローする
SEの休日

コメント

タイトルとURLをコピーしました