![見出し画像](https://assets.st-note.com/production/uploads/images/146276940/rectangle_large_type_2_e7a20b58d3a3673edc7ea29195d6d8ee.png?width=1200)
#27-28 無料iconのDLができる!Font Awesomeの使い方
What I learned today (今日の学び)
・今日はFont Awesomeというサイトを使って、web page上にアイコンを挿入、そのスタイルを指定する方法を学びました。
Font Awesomeには1000種類以上の無料アイコンが用意されています。
htmlファイルの<head></head>に<link>させるためのURLはこちら。
上記のサイトを開いてfont awesomeの欄の</>をクリックしてリンクをコピーします。
![](https://assets.st-note.com/img/1720156413720-GLinbpqhas.png?width=1200)
スクリーンショットで示したfont-awesomeのボタンをクリックすると次のページでアイコンが表示されます。使いたいアイコンをクリックすると次のページで、そのアイコンを挿入するためのリンクが表示されます。
例えばお家のアイコンの場合はこんな感じ。
画面の右側に書いてあるsyntaxをクリックするだけでクリップボードにコピーできます。
<i class="fs-solid fa-house"></i>
![](https://assets.st-note.com/img/1720156626516-o044SwBvLk.png?width=1200)
このsyntaxを、挿入したい場所に合わせてhtmlファイルに作った<div></div>の中にペーストします。
練習問題
以下のようなデザインをブラウザに表示したいとします。
(Beachのわりに、わんちゃんの背景が海じゃないのはご容赦ください)
![](https://assets.st-note.com/img/1720157318252-lc09w16D0D.png?width=1200)
まず、<div class="container"></div>という親要素を作ります。
画像、アイコン、文字いずれも中央ぞろえなので、それらを含む<div>を親要素の中に作ります。:<div class="text-center"></div>
画像とアイコン&文字の間にはスペースが空いているので、余白を作るための<div>を作り、その中に画像とアイコンのタグを入れます。
ここまで字面で書いたsyntaxは以下の通り
![](https://assets.st-note.com/img/1720158043966-HgqA5B9zJj.png)
おさらいしたいsyntaxに絞って、役割を箇条書きします。
・<img>tagにあるw-50は画面の50%の幅で表示するという意味です。
・mt-5はmargin topの大きさの指定。
・rounded-circleは写真を円形に表示する役割。筆者が最初にコードを書いたとき、rounded-の部分を忘れていたので反応しませんでした。syntaxは正しく書こう。
・<i>tagの中のfa-2xはアイコンのサイズの指定です。とれる値は整数のみ。
・<span>はinline elementであることに注意。ブラウザ上ではアイコンとテキストの間にスペースはありません。横並びで書くためにinline elementにする必要があります。筆者は最初<h2>で書いてしまったので、block elementになってしまい、アイコンとテキストの間にスペースができてしまいました。
elementの配置の調整方法
・Float
<p>tagや<h1>tagのようなblock elementをinline elementのように表示できます。
例えば以下のsyntaxだと、
<h2>Float</h2>
<p class="float-start">float: left</p>
<p class="float-end">float: right</p>
<p class="float-none">float: none</p>
ブラウザには次のように表示されます。
![](https://assets.st-note.com/img/1720159577021-arpTCJvAF1.png?width=1200)
Bootstrapでのmarginとpaddinfの書き方は以下。
![](https://assets.st-note.com/img/1720159992277-A8BWSQFfL5.png)
補足説明
m: margin
my: y軸方向でmarginの大きさを統一したいとき
mx: x軸方向でmarginの大きさを統一したいとき
p: padding
py: y軸方向でpaddingの大きさを統一したいとき
px: x軸方向でpaddingの大きさを統一したいとき
WidthとHeightの書き方は以下の通り
![](https://assets.st-note.com/img/1720160171369-UM8B8MrYgf.png)
widthやheightを指定するclassを作ります。w-25, w-50などw-のあとに続く数値によって、表示範囲(↑のsyntaxの場合800px)の何%に表示するかを指定します。高さh-の場合も同様。
Borderの書き方は以下の通り
rounded-circle borderのように、わりとそのまま書きます。
色の指定もシンプルでborder-の後に色の名前を書くだけです。
![](https://assets.st-note.com/img/1720160263264-3TczxyyoEy.png)
borderの場所を指定することもできます。
使うsyntaxはborder-top, border-bottom, border-left, border-right
borderを消す場合は
border-0を使います。
border-消したい位置の名前-0で特定の場所の指定もできます
border-top-0, border-bottom-0, border-left-0, border-right-0
今日はここまで!読んでいただき、ありがとうございました^^
明日もBootstrapの続きを勉強します。
![](https://assets.st-note.com/img/1720160780044-uv3c1UVkTg.png)
Kredoについて詳しく知りたい方はぜひこちらもご覧ください。😊
この記事が気に入ったらサポートをしてみませんか?