Bootstrap5（ブートストラップ5）でFont Awesome以外にBootstrapアイコン（Bootstrap Icons）を使用する方法です。
CDNの追加
|
1 |
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css" integrity="sha384-b6lVK+yci+bfDmaY1u0zE8YYJt0TZxLEAFyYSLHId4xoVvsrQu3INevFKo+Xir8e" crossorigin="anonymous"> |
アイコン種類の確認
Bootstrap Icons
Official open source SVG icon library for Bootstrap
icons.getbootstrap.com
利用方法
CDNの項目に記載の方法でアイコンフォントファイルを取得して使用
各アイコンのコードは、公式サイトに記載されている各アイコンをクリックし、”Icon font”の項目に記載されているコードをコピーして使用。
font-size と color を使用して、アイコンの外観を変更します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap5 基本CDNテンプレート</title> <!-- CSS only 5.3.3 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" integrity="sha384-fmAz1I/QD4m4yKjSHzX9IovDRRXoqxPze+nZQ2ue5Kh5KjHXalNmEhBlkgIzC9uO" crossorigin="anonymous"> <!-- Bootstrap Icons --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css" integrity="sha384-b6lVK+yci+bfDmaY1u0zE8YYJt0TZxLEAFyYSLHId4xoVvsrQu3INevFKo+Xir8e" crossorigin="anonymous"> <!-- Font Awesome 6.1.0 --> <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v6.1.0/css/all.css" integrity="sha384-32X9fjlz7piOJ64yLhNAbv57gP/uN6R+0GZC0SDg5X/01r3RY1uIbV7wC2LkmAa7" crossorigin="anonymous"> </head> <body> <!-- コンテンツ --> <i class="bi bi-android2"></i> <i class="bi bi-alarm" style="font-size: 2rem; color: cornflowerblue;"></i> <!-- /コンテンツ --> <!-- JavaScript Bundle with Popper 5.3.3 --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-3sFcsZs0szyRnTgTwrjKMYc/ivz/9YZgQ2nKUE3xZwH58LsN8jKKeVbld+i+sCCy" crossorigin="anonymous"></script> <!-- jquery 3.6.0 --> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha384-G0zK2wEPwDBU+8ZH7T2n0wn6U8W6ZwwTpPCYlq6pLddgD8Ww3T/F4zo1xhxh+NqF" crossorigin="anonymous"></script> </body> </html> |
コメント