Bootstrap Icons – Programowanie

Lista ikon: https://icons.getbootstrap.com/

Najlepsza metoda – instalacja npm i kopiowanie do właściwych katalogów

Ikony bootstrap

# composer require twbs/bootstrap-icons

// lub lepiej
# npm i bootstrap-icons

ls -la node_modules/bootstrap-icons/

node_modules/bootstrap-icons/font/
├── font/
│   ├── bootstrap-icons.css          # Plik CSS dla fontów
│   ├── bootstrap-icons.min.css      # Zminifikowany CSS
│   └── fonts/                       # Alternatywna lokalizacja fontów
    │ ├── bootstrap-icons.woff       # Font WOFF 
    │ ├── bootstrap-icons.woff2      # Font WOFF2
└── icons/

Kopiowanie plików do webroot/

# mkdir -p webroot/css/vendor - jeśli jeszcze nie ma
# mkdir -p webroot/css/vendor/fonts 

// Skopiuj CSS 
# cp node_modules/bootstrap-icons/font/bootstrap-icons.min.css webroot/css/vendor/ 

// Skopiuj fonty 
# cp node_modules/bootstrap-icons/font/fonts/bootstrap-icons.woff* webroot/css/vendor/fonts/

Lub zautomatyzować kopiowanie w package.json – dodać wpis copy-bi

{
  "scripts": {
    "copy-assets": "npm run copy-bootstrap && npm run copy-jquery && npm run copy-fa && npm run copy-bi",
    "copy-bootstrap": "cp node_modules/bootstrap/dist/css/bootstrap.min.css webroot/css/vendor/ && cp node_modules/bootstrap/dist/js/bootstrap.bundle.min.js webroot/js/vendor/",
    "copy-jquery": "cp node_modules/jquery/dist/jquery.min.js webroot/js/vendor/",
    "copy-fa": "cp -r node_modules/@fortawesome/fontawesome-free/css/* webroot/css/vendor/ && cp -r node_modules/@fortawesome/fontawesome-free/webfonts webroot/",
    "copy-bi": "mkdir -p webroot/css/vendor/fonts && cp node_modules/bootstrap-icons/font/bootstrap-icons.min.css webroot/css/vendor/ && cp node_modules/bootstrap-icons/font/fonts/bootstrap-icons.woff* webroot/css/vendor/fonts/"
  }
}

Uruchomienie skryptu

# npm run copy-bi

// lub wszystkie razem:
# npm run copy-assets

Dołączenie templates/layout/default.php:

<head>
....
<!-- Bootstrap CSS --> 
<?= $this->Html->css('vendor/bootstrap.min.css') ?> 
<!-- FontAwesome --> 
<?= $this->Html->css('vendor/all.min.css') ?> 

<!-- Bootstrap Icons --> 
<?= $this->Html->css('vendor/bootstrap-icons.min.css') ?>

Użycie w szablonach:

<i class="bi bi-heart-fill"></i> 
<i class="bi bi-check-circle"></i> 
<i class="bi bi-person"></i>

<i class="bi bi-alarm" style="font-size: 2rem; color: red;"></i> 
<i class="bi bi-heart-fill" style="font-size: 2rem; color: pink;"></i> 
<i class="bi bi-star-fill" style="font-size: 2rem; color: gold;"></i>