Bulma-elements-box-icon
提供：Dev Guides
ブルマ-ボックスとアイコン
説明
_.box_クラスは、ボーダー、半径、パディングを含むコンテナを定義します。
以下の例では、ページ内の要素のボックスとアイコンを表示する方法について説明します-
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Elements Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
Box Element
</span>
<br>
<br>
<div class = "box">
<article class = "media">
<figure class = "media-left">
<p class = "image is-64x64">
<img src = "https://www.finddevguides.com/bootstrap/images/64.jpg">
</p>
</figure>
<div class = "media-content">
<div class = "content">
<p>
<strong>Will Smith</strong>
<small>@wsmith</small>
<small>45m</small>
<br>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
</p>
</div>
<nav class = "level is-mobile">
<div class = "level-left">
<a class = "level-item">
<span class = "icon is-small"><i class = "fas fa-reply"></i></span>
</a>
<a class = "level-item">
<span class = "icon is-small"><i class = "fas fa-retweet"></i></span>
</a>
<a class = "level-item">
<span class = "icon is-small"><i class = "fas fa-heart"></i></span>
</a>
</div>
</nav>
</div>
</article>
</div>
</div>
</section>
</body>
</html>上記のコードを実行すると、以下の出力が得られます-
アイコン
.icon_クラスは、要素にFont Awesomeアイコン、Material Design Icons、Ioniconsなどのアイコンフォントライブラリを提供します。 アイコンの色はhttps://bulma.io/documentation/modifiers/typography-helpers/#colors[text color modifiers]を使用して変更でき、アイコンのサイズは_is-small _、 is-medium_および_is-を使用して変更できます_icon_コンテナを持つlarge_クラス。
以下の例では、シンプルなアイコンの表示、アイコンの色の変更（is-info _、 is-success 、 is-warning 、 is-danger_色修飾子を使用）とサイズ（is-small _、 is-medium 、 isなどのクラスの使用） -large_）-
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Elements Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
Icon Element
</span>
<br>
<br>
<span class = "is-size-5">Simple Icon</span>
<br>
<span class = "icon">
<i class = "fas fa-user"></i>
</span>
<br>
<br>
<span class = "is-size-5">Icon Colors</span>
<br>
<span class = "icon has-text-info">
<i class = "fas fa-user"></i>
</span>
<span class = "icon has-text-success">
<i class = "fas fa-user"></i>
</span>
<span class = "icon has-text-warning">
<i class = "fas fa-user"></i>
</span>
<span class = "icon has-text-danger">
<i class = "fas fa-user"></i>
</span>
<br>
<br>
<span class = "is-size-5">Icon Sizes</span>
<br>
<span class = "icon is-small">
<i class = "fas fa-user"></i>
</span>
<span class = "icon is-medium">
<i class = "fas fa-2x fa-user"></i>
</span>
<span class = "icon is-large">
<i class = "fas fa-3x fa-user"></i>
</span>
</div>
</section>
</body>
</html>以下の出力が表示されます-
アイコンのバリエーション
Font Awesomeのバリエーションでは、さまざまなタイプの修飾子クラスを提供して、ページに固定幅のアイコン、境界線アイコン、アニメーションアイコンなどを表示します。 マテリアルデザインアイコンを使用すると、ユーザーは必要に応じてアイコンの色とサイズを表示できます。 Ioniconsアイコンは、Web、iOS、Android、およびデスクトップアプリケーションで使用されるオープンソースアイコンです。
ページで上記のアイコンのバリエーションの使用方法を示すサンプルを作成しましょう-
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Elements Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<link href = "https://unpkg.com/[email protected]/dist/css/ionicons.min.css" rel = "stylesheet">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
<script src = "https://unpkg.com/[email protected]/dist/ionicons.js"></script>
<link rel = "stylesheet" href = "https://cdn.materialdesignicons.com/2.1.19/css/materialdesignicons.min.css">
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
Icon Variations
</span>
<br>
<br>
<span class = "is-size-5">Font Awesome Icons</span>
<br>
<br>
<span class = "icon is-medium">
<i class = "fas fa-2x fa-spinner fa-pulse"></i>
</span>
<span class = "icon is-medium">
<i class = "fas fa-2x fa-fw fa-user"></i>
</span>
<span class = "icon is-medium">
<i class = "fas fa-2x fa-border fa-user"></i>
</span>
<span class = "icon is-medium">
<span class = "fa-stack">
<i class = "fas fa-circle fa-stack-2x"></i>
<i class = "fas fa-user fa-stack-1x fa-inverse"></i>
</span>
</span>
<br>
<br>
<span class = "is-size-5">Material Design Icons</span>
<br>
<br>
<span class = "icon is-small">
<i class = "mdi mdi-18px mdi-account-box"></i>
</span>
<span class = "icon is-medium">
<i class = "mdi mdi-24px mdi-account-box"></i>
</span>
<span class = "icon is-large">
<i class = "mdi mdi-36px mdi-account-box"></i>
</span>
<br>
<br>
<span class = "is-size-5">Ionicons</span>
<br>
<br>
<span class = "icon is-small">
<ion-icon size = "small" name = "person"></ion-icon>
</span>
<span class = "icon is-large">
<ion-icon size = "large" name = "person"></ion-icon>
</span>
</div>
</section>
</body>
</html>以下の出力が表示されます-
