画像

画像と組み合わせたコピペで使えるFontAwesomeサンプル集です。画像とアイコンをCSSで組み合わせることで便利な使い方もできます。

画像の隅にテキストをのせる（指定テキスト）

SAMPLE
CODE

Check

HTML
COPY

<span class="fas_image_text">
	<span><i class="fas fa-check-circle"></i>Check</span>
	<img src="{画像URL}">
</span>

CSS
COPY

.fas_image_text{
	position: relative;
	display: inline-block;
}
.fas_image_text span{
	position: absolute;
	top: 0;
	left: 0;
	height: 20px;
	line-height: 20px;
	padding: 0 5px;
	background: rgba(51, 51, 51, 0.8);
	color: #fff;
	font-size: 14px;		
}	
.fas_image_text span i{
	margin-right: 5px;
}
.fas_image_text img{
	width: 100%;
	max-width: 200px;
	height: auto;
	vertical-align: bottom;
}

画像の隅にアイコン付きのテキストを表示させたサンプルです。テキストタグをposition: absolute;で絶対配置にすることで画像の隅にテキストが表示されるように設定しています。このサンプルはテキストを指定できるので異なる文言を画像ののせたい場合に便利です。

画像の隅にテキストをのせる（固定テキスト）

SAMPLE
CODE

HTML
COPY

<span class="fas_image_fiexdtext">
	<img src="{画像URL}">
</span>

CSS
COPY

.fas_image_fiexdtext{
	position: relative;
	display: inline-block;
}
.fas_image_fiexdtext:before{
	position: absolute;
	top: 0;
	left: 0;
	height: 20px;
	line-height: 20px;
	padding: 0 5px 0 5px;
	background: rgba(51, 51, 51, 0.6);
	color: #fff;
	font-size: 14px;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free",sans-serif; 
	font-weight: 900;
	content: '\f058  Check';
}	
.fas_image_fiexdtext img{
	width: 100%;
	max-width: 200px;
	height: auto;
	vertical-align: bottom;
}

こちらも同じく画像の隅にテキストを表示するサンプルですが、こちらは固定テキストになっています。:beforeで固定のテキストを表示させています。複数の画像に同じテキストをのせるような場合に便利なサンプルです。

画像にタイトル風にテキストをのせる

SAMPLE
CODE

Blog

HTML
COPY

<span class="fas_image_title">
	<span><i class="fas fa-edit"></i>Blog</span>
	<img src="{画像URL}">
</span>

CSS
COPY

.fas_image_title{
	position: relative;
	display: inline-block;
}
.fas_image_title span{
	display: inline-block;
	position: absolute;
	bottom: 15px;
	left: 0;
	width: calc(100% - 50px);
	height: 40px;
	padding-left: 10px;
	line-height: 40px;
	background: rgba(51, 51, 51, 0.8);
	color: #fff;
	font-size: 20px;		
}	
.fas_image_title span i{
	margin-right: 5px;
}
.fas_image_title span:after{
	display: inline-block;
	position: absolute;
	bottom: 0;
	right: -40px;
	width: 40px;
	height: 40px;
	line-height: 40px;
	background: rgba(51, 51, 51, 0.8);
	background: -moz-linear-gradient(left,  rgba(51, 51, 51, 0.8) 0%, rgba(51, 51, 51, 0) 100%);
	background: -webkit-linear-gradient(left,  rgba(51, 51, 51, 0.8) 0%,rgba(51, 51, 51, 0) 100%);
	background: linear-gradient(to right,  rgba(51, 51, 51, 0.8) 0%,rgba(51, 51, 51, 0) 100%);
	content: '';
}
.fas_image_title img{
	width: 100%;
	max-width: 200px;
	height: auto;
	vertical-align: bottom;
}

ブログのアイキャッチなどで使えるタイトル風のテキストを画像ののせたサンプルです。画像のうえに透過した背景を作り出してテキストを表示しています。また右に向かって消えていくように擬似要素をつけてグラデーションにしています。

画像中央にタイトル風のテキストをのせる

SAMPLE
CODE

Diary

HTML
COPY

<span class="fas_image_titlecenter">
	<span><i class="fas fa-book"></i>Diary</span>
	<img src="{画像URL}">
</span>

CSS
COPY

.fas_image_titlecenter{
	position: relative;
	display: inline-block;
}
.fas_image_titlecenter span{
	display: inline-block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 40px;
	margin: auto;
	width: calc(100% - 80px);
	height: 40px;
	line-height: 40px;
	text-align: center;
	background: rgba(51, 51, 51, 0.8);
	color: #fff;
	font-size: 20px;
}	
.fas_image_titlecenter span i{
	margin-right: 5px;
}
.fas_image_titlecenter span:before,
.fas_image_titlecenter span:after{
	display: inline-block;
	position: absolute;
	bottom: 0;
	width: 30px;
	height: 40px;
	line-height: 40px;
	background: rgba(51, 51, 51, 0.8);
	content: '';
}
.fas_image_titlecenter span:before{
	left: -30px;
	background: -moz-linear-gradient(left,  rgba(51, 51, 51, 0) 0%, rgba(51, 51, 51, 0.8) 100%);
	background: -webkit-linear-gradient(left,  rgba(51, 51, 51, 0) 0%,rgba(51, 51, 51, 0.8) 100%);
	background: linear-gradient(to right,  rgba(51, 51, 51, 0) 0%,rgba(51, 51, 51, 0.8) 100%);
}
.fas_image_titlecenter span:after{
	right: -30px;
	background: -moz-linear-gradient(left,  rgba(51, 51, 51, 0.8) 0%, rgba(51, 51, 51, 0) 100%);
	background: -webkit-linear-gradient(left,  rgba(51, 51, 51, 0.8) 0%,rgba(51, 51, 51, 0) 100%);
	background: linear-gradient(to right,  rgba(51, 51, 51, 0.8) 0%,rgba(51, 51, 51, 0) 100%);
}
.fas_image_titlecenter img{
	width: 100%;
	max-width: 200px;
	height: auto;
	vertical-align: bottom;
}

画像の中央にタイトル風にテキストをのせたサンプルです。透過した背景にテキストをのせて表示しています。擬似要素の:beforeと:afterで両端が消えていくような表示にさせています。

画像の指定した位置にアイコンをのせる

SAMPLE
CODE

HTML
COPY

<span class="fas_image_icon">
	<i class="fas fa-arrow-right" style="top:60px;left:20px;transform:rotate(45deg);"></i>
	<img src="{画像URL}">
</span>

CSS
COPY

.fas_image_icon{
	position: relative;
	display: inline-block;
}
.fas_image_icon i{
	position: absolute;
	font-size: 35px;
	color: #3366cc;
	text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff;
}	
.fas_image_icon img{
	width: 100%;
	max-width: 200px;
	height: auto;
	vertical-align: bottom;
}

画像の指定した位置にアイコンを表示させるサンプルです。iタグにスタイルでtopやleftを指定することでアイコンの位置を指定できます。画像に矢印を入れたいなどのときに使えると思います。

画像の中央にアイコンをのせる

SAMPLE
CODE

HTML
COPY

<span class="fas_image_iconcenter">
	<img src="{画像URL}">
</span>

CSS
COPY

.fas_image_iconcenter{
	position: relative;
	display: inline-block;
}
.fas_image_iconcenter:before{
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	font-size: 100px;
	color: rgba(51, 102, 204, 0.8);
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 400;
	content: '\f111';
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
	justify-content: center;	
	align-items: center;
}	
.fas_image_iconcenter img{
	width: 100%;
	max-width: 200px;
	height: auto;
	vertical-align: bottom;
}

画像の中央にアイコンをのせるサンプルです。アイコンは高さと横幅を画像と同じにしてdisplay: flex;で中央に表示されるようにしています。また文字色をrgba(〜)で指定することによってアイコンを透過させて表示させています。

画像の拡大

SAMPLE
CODE

HTML
COPY

<a href="{画像URL}" target="_blank" class="fas_image_expansion"><img src="{画像URL}"></a>

CSS
COPY

.fas_image_expansion{
	position: relative;
	display: inline-block;
}
.fas_image_expansion:after{
	position: absolute;
	bottom: 2px;
	right: 2px;
	height: 30px;
	width: 30px;
	line-height: 30px;
	text-align: center;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f00e';
	color: #3366cc;
	text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff;
	font-size: 20px;		
}
.fas_image_expansion img{
	width: 100%;
	max-width: 200px;
	height: auto;
	vertical-align: bottom;
}

画像リンクで拡大表示をさせるサンプルです。画像の右下にアイコンを表示させることで拡大できることをわかりやすくしています。アイコンはposition: absolute;で絶対配置にすることで右下に表示させています。

画像の拡大（丸枠）

SAMPLE
CODE

HTML
COPY

<a href="{画像URL}" target="_blank" class="fas_image_expansioncircle"><img src="{画像URL}"></a>

CSS
COPY

.fas_image_expansioncircle{
	position: relative;
	display: inline-block;
}
.fas_image_expansioncircle:after{
	position: absolute;
	bottom: 2px;
	right: 2px;
	height: 30px;
	width: 30px;
	line-height: 30px;
	text-align: center;
	background: rgba(51, 102, 204, 0.8);
	border-radius: 15px;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f00e';
	color: #fff;
	font-size: 20px;		
}
.fas_image_expansioncircle img{
	width: 100%;
	max-width: 200px;
	height: auto;
	vertical-align: bottom;
}

画像リンクで拡大表示させるサンプルのアイコンに丸枠をつけたサンプルです。擬似要素のアイコンに背景色をつけborder-radiusで角丸を指定することで丸枠を作成しています。