HTML-CSS入門講座

濱屋太郎

WebParts-6
アイコンパーツ

目次

P6.1 はじめに

P6.1.1 概要

  • 「アイコンパーツ」は、アイコンやSNSアイコンなどのアイコンパーツを説明します。
  • 「アイコンパーツ」で説明している機能は、以下の通りです。
(1) アイコン(Font Awesome)
Font Awesomeの使用法を説明します。

P1.2 アイコン

P6.2.1 アイコン(Font Awesome)

(1) 説明

  • Font Awesomeの使用法を説明します。

(2) 表示形式

  • 使用法のサンプルを確認してください。

別画面で表示

(3) 使用機能

JavaScript
  • 使用しません。
jQuery
  • 使用しません。
アイコンフォント
  • アイコン(Font Awesome)
    公式サイト:Font Awesome(https://fontawesome.com/)
    CDN(CSS):https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.css
    CDN(CSS):https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.10/font-awesome-animation.css

(4) ソースコード

ソースコード表示
■ ファイル配置
  • icon-awesome-01
    • index.html

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Font Awesomeのサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<!-- ▼▼▼ CSS(ここから)▼▼▼ -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.css" rel="stylesheet">
<!-- Font Awesomeでアニメーションを使用する時に追加します -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.10/font-awesome-animation.css" rel="stylesheet">
<!-- ▲▲▲ CSS(ここまで) ▲▲▲ -->
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,ol,li,label {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
body {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 10px;
	border: #fff 1px solid;
}
.wrapper {
	max-width: 760px;
	margin: 0 auto;
}

/* Font Awesomeの設定 */
h1 {
	padding: 10px;
	margin-bottom: 20px;
	font-size: 1.6rem;
	background: steelblue;
	color: #fff;
	text-align: center;
}
h2 {
	font-size: 1.4rem;
	padding: 10px;
	color: steelblue;
}
.list p {
	display: inline-block;
	line-height: 3;
}
/* ▼▼▼ CSS(ここから/使用するCSSを選択してコピーしてください)▼▼▼ */
/* 重ねる指定 */
.awesome-01 {
	position: relative;
	font-size: 3rem;
	vertical-align: baseline;
}
.awesome-01-parent {
	width: auto;
	position: static;
	font-size: 3rem;
}
.awesome-01-child {
	position: absolute;
	top: 0;
	left: -30px;
	font-size: 1.5rem;
	color: #fff;
}
/* 疑似要素での指定(爆弾) */
.awesome-02 {
	font-size: 2rem;
}
.awesome-02 .bomb:before {
	display: inline-block;
	padding: 0 5px;
	font-family: "Font Awesome 5 Free";
	content: '\f1e2';
	font-size: 3rem;
	font-weight: 900;
}
/* 疑似要素での指定(Twitter) */
.awesome-03 {
	font-size: 2rem;
}
.awesome-03 .twitter:before {
	display: inline-block;
	padding: 0 5px;
	font-family: "Font Awesome 5 Brands";
	content: '\f099';
	font-size: 3rem;
	font-weight: 900;
}
/* 見出しでの指定(01) */
.heading-01 {
	position: relative;
	font-size: 2rem;
	padding: 10px 10px 10px 80px;
	margin-bottom: 20px;
	border: #ccc 1px solid;
}
.heading-01::before {
	position: absolute;
	left: 20px;
	top: -6px;
	font-family: "Font Awesome 5 Free";
	content: "\f00c";
	font-weight: 900;
	font-size: 3rem;
	color: pink;
	font-weight: 900;
}
/* 見出しでの指定(02) */
.heading-02 {
	position: relative;
	font-size: 2rem;
	padding: 10px 10px 10px 80px;
	margin-bottom: 20px;
	border: #ccc 1px solid;
}
.heading-02::before {
	position: absolute;
	left: 20px;
	top: -6px;
	font-family: "Font Awesome 5 Free";
	content: "\f075";
	font-weight: 900;
	font-size: 3rem;
	color: steelblue;
	font-weight: 900;
}
/* リストでの指定 */
.list-01 li {
	list-style-type: none;
}
.list-01 li {
	position: relative;
	font-size: 2rem;
	padding: 0 10px 0 80px;
}
.list-01 li::before {
	position: absolute;
	left: 20px;
	top: -16px;
	font-family: "Font Awesome 5 Free";
	content: "\f00c";
	font-weight: 900;
	font-size: 3rem;
	color: steelblue;
	font-weight: 900;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
	<!-- Font Awesomeの定義 -->
	<div class="wrapper">
<!-- ▼▼▼ HTML(ここから/使用するHTMLを選択してコピーしてください)▼▼▼ -->
		<!-- アイコンの例 -->
		<h2>アイコンの例</h2>
		<div class="list">
			<p><span>01(fas fa-arrow-circle-up)</span><i class="fas fa-arrow-circle-up fa-3x fa-fw"></i></p>
			<p><span>02(fas fa-arrow-circle-down)</span><i class="fas fa-arrow-circle-down fa-3x fa-fw"></i></p>
			<p><span>03(fas fa-arrow-circle-left)</span><i class="fas fa-arrow-circle-left fa-3x fa-fw"></i></p>
			<p><span>04(fas fa-arrow-circle-right)</span><i class="fas fa-arrow-circle-right fa-3x fa-fw"></i></p>
			<p><span>05(fas fa-arrows-alt)</span><i class="fas fa-arrows-alt fa-3x fa-fw"></i></p>
			<p><span>06(fas fa-arrow-up)</span><i class="fas fa-arrow-up fa-3x fa-fw"></i></p>
			<p><span>07(fas fa-arrow-down)</span><i class="fas fa-arrow-down fa-3x fa-fw"></i></p>
			<p><span>08(fas fa-arrow-left)</span><i class="fas fa-arrow-left fa-3x fa-fw"></i></p>
			<p><span>09(fas fa-arrow-right)</span><i class="fas fa-arrow-right fa-3x fa-fw"></i></p>
			<p><span>10(fas fa-bell)</span><i class="fas fa-bell fa-3x fa-fw" style="color: #ebc50d;"></i></p>
			<p><span>11(fas fa-biking)</span><i class="fas fa-biking fa-3x fa-fw" style="color: #36933d;"></i></p>
			<p><span>12(fas fa-bomb)</span><i class="fas fa-bomb fa-3x fa-fw"></i></p>
			<p><span>13(fas fa-bus-alt)</span><i class="fas fa-bus-alt fa-3x fa-fw" style="color: #ffc800;"></i></p>
			<p><span>14(fas fa-camera)</span><i class="fas fa-camera fa-3x fa-fw" style="color: #888;"></i></p>
			<p><span>15(fas fa-cannabis)</span><i class="fas fa-cannabis fa-3x fa-fw" style="color: #f00;"></i></p>
			<p><span>16(fas fa-ambulance)</span><i class="fas fa-ambulance fa-3x fa-fw" style="color: #c14343;"></i></p>
			<p><span>17(fab fa-apple)</span><i class="fab fa-apple fa-3x fa-fw"></i></p>
			<p><span>18(fas fa-cart-arrow-down)</span><i class="fas fa-cart-arrow-down fa-3x fa-fw" style="color: #e3a61c;"></i></p>
			<p><span>19(fas fa-cloud-download-alt)</span><i class="fas fa-cloud-download-alt fa-3x fa-fw" style="color: #38c9b5;"></i></p>
			<p><span>20(fab fa-facebook)</span><i class="fab fa-facebook fa-3x fa-fw" style="color: #2a6fb4;"></i></p>
			<p><span>21(fab fa-twitter)</span><i class="fab fa-twitter fa-3x fa-fw" style="color: #1c96e8;"></i></p>
			<p><span>22(fab fa-instagram)</span><i class="fab fa-instagram fa-3x fa-fw" style="color: #b32e9f;"></i></p>
			<p><span>23(fab fa-line)</span><i class="fab fa-line fa-3x fa-fw" style="color: #06c152;"></i></p>
			<p><span>24(fab fa-youtube)</span><i class="fab fa-youtube fa-3x fa-fw" style="color: #f70000;"></i></p>
		</div>
		<!-- サイズの指定 -->
		<h2>サイズの指定</h2>
		<div class="list">
			<p><span>01(fa-lg)</span><i class="fas fa-arrow-circle-up fa-lg fa-fw"></i></p>
			<p><span>02(fa-1x)</span><i class="fas fa-arrow-circle-up fa-1x fa-fw"></i></p>
			<p><span>03(fa-2x)</span><i class="fas fa-arrow-circle-up fa-2x fa-fw"></i></p>
			<p><span>04(fa-3x)</span><i class="fas fa-arrow-circle-up fa-3x fa-fw"></i></p>
			<p><span>05(fa-4x)</span><i class="fas fa-arrow-circle-up fa-4x fa-fw"></i></p>
			<p><span>06(fa-5x)</span><i class="fas fa-arrow-circle-up fa-5x fa-fw"></i></p>
		</div>
		<!-- 色の指定 -->
		<h2>色の指定</h2>
		<div class="list">
			<p><span>01(style="color: red;")</span><i class="fas fa-arrow-circle-up fa-3x fa-fw" style="color: red;"></i></p>
			<p><span>02(style="color: lime;")</span><i class="fas fa-arrow-circle-up fa-3x fa-fw" style="color: lime;"></i></p>
			<p><span>03(style="color: blue;")</span><i class="fas fa-arrow-circle-up fa-3x fa-fw" style="color: blue;"></i></p>
			<p><span>04(style="color: skyblue;")</span><i class="fas fa-arrow-circle-up fa-3x fa-fw" style="color: skyblue;"></i></p>
			<p><span>05(style="color: pink;")</span><i class="fas fa-arrow-circle-up fa-3x fa-fw" style="color: pink;"></i></p>
		</div>
		<!-- 表示角度・反転の指定 -->
		<h2>表示角度・反転の指定</h2>
		<div class="list">
			<p><span>01(fa-rotate-90)</span><i class="fas fa-ambulance fa-3x fa-rotate-90 fa-fw"></i></p>
			<p><span>02(fa-rotate-180)</span><i class="fas fa-ambulance fa-3x fa-rotate-180 fa-fw"></i></p>
			<p><span>03(fa-rotate-270)</span><i class="fas fa-ambulance fa-3x fa-rotate-270 fa-fw"></i></p>
			<p><span>04(fa-flip-horizontal)</span><i class="fas fa-ambulance fa-3x fa-flip-horizontal fa-fw"></i></p>
			<p><span>05(fa-flip-vertical)</span><i class="fas fa-ambulance fa-3x fa-flip-vertical fa-fw"></i></p>
		</div>
		<!-- 飾りの指定 -->
		<h2>飾りの指定</h2>
		<div class="list">
			<p><span>01(fa-border)</span><i class="fas fa-arrows-alt fa-3x fa-border fa-fw"></i></p>
			<p><span>02(fa-stack)</span></p>
			<p><span class="awesome-01 fa-stack">
				<i class="awesome-01-parent fas fa-cloud fa-stack-2x"></i>
				<i class="awesome-01-child fab fa-twitter fa-stack-1x"></i>
			</span></p>
		</div>
		<!-- アニメーションの指定 -->
		<h2>アニメーションの指定</h2>
		<div class="list">
			<p><span>01(fa-spin)</span><i class="fas fa-arrows-alt fa-spin fa-3x fa-fw"></i></p>
			<p><span>03(faa-wrench animated)</span><i class="fab fa-twitter faa-wrench animated fa-3x fa-fw"></i></p>
			<p><span>04(faa-ring animated)</span><i class="fas fa-bus faa-ring animated fa-3x fa-fw" ></i></p>
			<p><span>05(faa-horizontal animated)</span><i class="fas fa-male faa-horizontal animated fa-3x fa-fw"></i></p>
			<p><span>06(faa-vertical animated)</span><i class="fas fa-arrow-up faa-vertical animated fa-3x fa-fw"></i></p>
			<p><span>07(faa-flash animated)</span><i class="fas fa-star faa-flash animated fa-3x fa-fw"></i></p>
			<p><span>08(faa-bounce animated)</span><i class="fas fa-music faa-bounce animated fa-3x fa-fw"></i></p>
			<p><span>09(faa-spin animated)</span><i class="fas fa-cog faa-spin animated fa-3x fa-fw"></i></p>
			<p><span>10(faa-float animated)</span><i class="fas fa-ship faa-float animated fa-3x fa-fw"></i></p>
			<p><span>11(faa-pulse animated)</span><i class="fas fa-heart faa-pulse animated fa-3x fa-fw"></i></p>
			<p><span>12(faa-shake animated)</span><i class="fas fas fa-cog faa-shake animated fa-3x fa-fw"></i></p>
			<p><span>13(faa-tada animated)</span><i class="fas fa-plane faa-tada animated fa-3x fa-fw"></i></p>
			<p><span>14(faa-passing-reverse animated)</span><i class="fas fa-bicycle faa-passing-reverse animated fa-3x fa-fw"></i></p>
			<p><span>15(faa-passing animated)</span><i class="fas fa-bicycle faa-passing animated fa-3x fa-fw"></i></p>
			<p><span>16(faa-burst animated)</span><i class="fas fa-bomb faa-burst animated fa-3x fa-fw"></i></p>
		</div>
		<!-- 疑似要素での指定 -->
		<h2>疑似要素での指定</h2>
		<p class="awesome-02">01 これは<span class="bomb">爆弾</span>です。</p>
		<p class="awesome-03">02 詳細は<span class="twitter">Twitter</span>で!</p>
		<!-- 見出しでの指定 -->
		<h2>見出しでの指定</h2>
		<h3 class="heading-01">01 見出しサンプル</h3>
		<h3 class="heading-02">02 見出しサンプル</h3>
		<!-- リストでの指定 -->
		<h2>リストでの指定</h2>
		<ul class="list-01">
			<li>リストサンプル-01</li>
			<li>リストサンプル-02</li>
			<li>リストサンプル-03</li>
		</ul>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
	</div>
</div>

</body>
</html>

ロケット本体
PAGE
TOP
ロケット炎