WEB開発

Laravel8.x + Bootstrap + FontAwesomeを使う

Laravel8.x

Laravel8.xからはTailwindというCSSフレームワークが標準となっています。

それまではbootstrapだったのですがいきなり変わったので対応できなくなっている方も多いと思います。

bootstrapを引き続き使いたいという方に向けてのご紹介です。

laravelのインストール方法、Xserverにデプロイする方法は以下で解説しています。

laravelのインストール方法

インストール

laravelをXserverで利用する方法

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>
こうなったら成功

[ad]

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>

-WEB開発
-, ,