FontAwesome Sample

JQuery

JQueryを使ったコピペで使えるFontAwesomeサンプル集です。JQueryを使うことによって動的にアイコンの表示を変えるなどFontAwesomeの使い方の幅が広がります。

JQueryの導入方法

リンクで要素の表示・非表示

Week
Sunday
Monday
Tuesday
Wednenday
Thursday
Friday
Saturday
<div class="fas_jquery_display">
	<a href="#" class="fas_jquery_display_icon1">Week</a>
	<div class="fas_jquery_display_area">
		Sunday<br>
		Monday<br>
		Tuesday<br>
		Wednenday<br>
		Thursday<br>
		Friday<br>
		Saturday<br>
	</div>
</div>
.fas_jquery_display a{
	text-decoration: none;
	display: block;
	padding: 5px;
	background: #6699cc;
	color: #fff;
}
.fas_jquery_display_icon1:before, 
.fas_jquery_display_icon2:before{
	display: inline-block;
	width: 1em;
	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;
}
.fas_jquery_display_icon1:before{
	content: '\f0da';
}
.fas_jquery_display_icon2:before{
	content: '\f0d7';
}
.fas_jquery_display .fas_jquery_display_area{
	display: none;
	background: #e0ecf9;
	padding: 10px 20px;
}
$('.fas_jquery_display a').on('click',function(){
	$(this).next('.fas_jquery_display_area').slideToggle('500');
	$(this).toggleClass('fas_jquery_display_icon1').toggleClass('fas_jquery_display_icon2');
	return false;
});

リンクをクリックすると下の要素が表示・非表示になるJQueryのサンプルです。Q&Aやサンプルコードの表示などで使えます。アイコンを表示させるクラスを２つ用意して表示・非表示で切り替えることができるようにしています。

タブで表示領域を切り替える

April
May
June
July
August
September
October
November
December
January
February
March
<div class="fas_jquery_tab">
	<ul>
		<li><a href="#" data-area="area1" class="fas_jquery_tab_selected">Spring</a></li>
		<li><a href="#" data-area="area2">Summer</a></li>
		<li><a href="#" data-area="area3">Autumn</a></li>
		<li><a href="#" data-area="area4">Winter</a></li>
	</ul>
	<div id="area1" class="fas_jquery_tab_area" style="display: block;">
		April<br>
		May<br>
		June<br>
	</div>
	<div id="area2" class="fas_jquery_tab_area">
		July<br>
		August<br>
		September<br>
	</div>
	<div id="area3" class="fas_jquery_tab_area">
		October<br>
		November<br>
		December<br>
	</div>
	<div id="area4" class="fas_jquery_tab_area">
		January<br>
		February<br>
		March<br>
	</div>
</div>
.fas_jquery_tab ul{
	margin: 0;
	padding: 0;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;		
}
.fas_jquery_tab ul li{
	list-style: none;
	min-width: 120px;
	line-height: 30px;
	text-align: center;
	margin-right: 5px;
}
.fas_jquery_tab ul li a{
	text-decoration: none;
	display: block;
	background: #6699cc;
	color: #fff;	
	border-radius: 5px 5px 0 0;
}
.fas_jquery_tab ul li a:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f0da';
	margin-right: 3px;
}
.fas_jquery_tab ul li a.fas_jquery_tab_selected{
	background: #e0ecf9;
	color: #6699cc;
}
.fas_jquery_tab ul li a.fas_jquery_tab_selected:before{
	content: '\f0d7';
}
.fas_jquery_tab .fas_jquery_tab_area{
	background: #e0ecf9;
	padding: 10px 20px;
	display: none;
}
$('.fas_jquery_tab ul li a').on('click',function(){
	$('.fas_jquery_tab ul li a').removeClass('fas_jquery_tab_selected');
	$(this).addClass('fas_jquery_tab_selected');
	$('.fas_jquery_tab_area').hide();
	var area = $(this).attr("data-area");
	$('#'+area).show();
	return false;
});

タブで表示領域を切り替えることができるJQueryのサンプルです。タブをリストタグで作り、リンクに各領域のidを持たせることで表示領域を切り替えます。選択しているタブはクラスを付与することで背景色やアイコンを変えています。

チェックボックス

CheckBox 
<div class="fas_jquery_checkbox">
	<a href="#" class="fas_jquery_checkbox_off">CheckBox</a>
	<input type="hidden" name="checkbox" class="fas_jquery_checkbox_value" value="">
</div>
.fas_jquery_checkbox a{
	text-decoration: none;
}
.fas_jquery_checkbox_off{
	color: #999;
}
.fas_jquery_checkbox_on{
	color: #333;
}
.fas_jquery_checkbox_off:before,
.fas_jquery_checkbox_on:before{
	display: inline-block;
	width: 1.25em;
	text-align: center;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 400;
	margin-right: 3px;
	font-size: 1em;
}
.fas_jquery_checkbox_off:before{
	content: '\f0c8';
}
.fas_jquery_checkbox_on:before{
	content: '\f14a';
}
$('.fas_jquery_checkbox a').on('click',function(){
	$(this).toggleClass('fas_jquery_checkbox_off').toggleClass('fas_jquery_checkbox_on');
	if($(this).hasClass('fas_jquery_checkbox_on')){
		$(this).next('.fas_jquery_checkbox_value').val(1);
	}else{
		$(this).next('.fas_jquery_checkbox_value').val("");
	}
	return false;
});

アイコンで表現したJQueryのチェックボックスサンプルです。クリックされたときにとの２つアイコンを切り替えています。またフォームでも使えるようにtype="hidden"で非表示にしたインプットにチェックがはいったときは値を設定しています。

選択式のリスト（単一選択）

<ul class="fas_jquery_selectcheck">
	<li><a href="#" data-value="1" class="fas_jquery_selectcheck_on">Football</a></li>
	<li><a href="#" data-value="2">Baseball</a></li>
	<li><a href="#" data-value="3">Basketball</a></li>
</ul>
<input type="hidden" name="" class="fas_jquery_selectcheck_value" value="1">
.fas_jquery_selectcheck{
	margin: 0;
	padding: 0;
}
.fas_jquery_selectcheck li{
	list-style: none;
	margin-bottom: 5px;
}
.fas_jquery_selectcheck li:last-child{
	margin-bottom: 0px;
}
.fas_jquery_selectcheck li a{
	text-decoration: none;
	color: #999;
	display: inline-block;
	position: relative;
	padding: 0 0 0 calc(1em + 10px);
	line-height: 1;
}
.fas_jquery_selectcheck li a.fas_jquery_selectcheck_on{
	color: #333;
}
.fas_jquery_selectcheck li a.fas_jquery_selectcheck_on:before{
	position: absolute;
	left: 0;
	display: inline-block;
	width: 1.25em;
	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: '\f00c';
	font-size: 1em;
}
$('.fas_jquery_selectcheck li a').on('click',function(){
	var par = $(this).parents('.fas_jquery_selectcheck');
	var val = $(this).attr('data-value');
	par.find('.fas_jquery_selectcheck_on').removeClass('fas_jquery_selectcheck_on');
	$(this).addClass('fas_jquery_selectcheck_on');
	par.next('.fas_jquery_selectcheck_value').val(val);
	return false;
});

単一選択ができる選択式のリストのサンプルです。リストをクリックすることでアイコンが付き文字色を変えています。またフォームで使えるように非表示のインプットに各リストの値が設定されるようになっています。

選択式のリスト（複数選択）

<ul class="fas_jquery_selectcheckmulti">
	<li><a href="#">Apple</a><input type="hidden" name="select1" class="fas_jquery_selectcheckmulti_value" value=""></li>
	<li><a href="#">Banana</a><input type="hidden" name="select2" class="fas_jquery_selectcheckmulti_value" value=""></li>
	<li><a href="#">Grapes</a><input type="hidden" name="select3" class="fas_jquery_selectcheckmulti_value" value=""></li>
</ul>
.fas_jquery_selectcheckmulti{
	margin: 0;
	padding: 0;
}
.fas_jquery_selectcheckmulti li{
	list-style: none;
	margin-bottom: 5px;
}
.fas_jquery_selectcheckmulti li:last-child{
	margin-bottom: 0px;
}
.fas_jquery_selectcheckmulti li a{
	text-decoration: none;
	color: #999;
	display: inline-block;
	position: relative;
	padding: 0 0 0 calc(1em + 10px);
	line-height: 1;
}
.fas_jquery_selectcheckmulti li a.fas_jquery_selectcheckmulti_on{
	color: #333;
}
.fas_jquery_selectcheckmulti li a.fas_jquery_selectcheckmulti_on:before{
	position: absolute;
	left: 0;
	display: inline-block;
	width: 1.25em;
	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: '\f00c';
	font-size: 1em;
}
$('.fas_jquery_selectcheckmulti li a').on('click',function(){
	$(this).toggleClass('fas_jquery_selectcheckmulti_on');
	if($(this).hasClass('fas_jquery_selectcheckmulti_on')){
		$(this).next('.fas_jquery_selectcheckmulti_value').val(1);
	}else{
		$(this).next('.fas_jquery_selectcheckmulti_value').val("");
	}
	return false;
});

複数選択可能な選択式のリストサンプルです。単一選択とは違い、複数のリストを選択することができます。フォームで使う場合も想定しており、各リストそれぞれに非表示にインプットがあり選択されると値が入るようになっています。

ドロップダウン

選択してください 
<div class="fas_jquery_dropdown">
	<a href="#" class="fas_jquery_dropdown_box">選択してください</a>
	<ul>
		<li><a href="#" data-value="1">和食</a></li>
		<li><a href="#" data-value="2">洋食</a></li>
		<li><a href="#" data-value="3">中華</a></li>
	</ul>
	<input type="hidden" name="" value="">
</div>
.fas_jquery_dropdown,
.fas_jquery_dropdown *,
.fas_jquery_dropdown *:after{
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.fas_jquery_dropdown{
	display:inline-block;
	position: relative;
	width: 200px;
}
.fas_jquery_dropdown a{
	text-decoration: none;
	position: relative;
	display:inline-block;
	width: 100%;
	padding: 10px calc(1em + 15px) 10px 15px;
	background: #fff;
	border: 1px solid #999;
	color: #999;
	line-height: 1;
}
.fas_jquery_dropdown a:after{
	position: absolute;
	right: 10px;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f0d7';
	color: #999;
}
.fas_jquery_dropdown ul{
	position: absolute;
	display: none;
	width: 100%;
	margin: 0;	
	padding: 10px 0;
	background: #999;
}
.fas_jquery_dropdown ul li{
	list-style: none;
}
.fas_jquery_dropdown ul li a{
	text-decoration: none;
	display: block;
	padding: 10px 10px 10px calc(1em + 15px);
	border: none;
	background: none;
	color: #fff;
	line-height: 1;
}
.fas_jquery_dropdown ul li a:after{
	left: 15px;
	content: '\f0da';
	color: #fff;
}
.fas_jquery_dropdown ul li a:hover{
	background: #666;
	color: #fff;
}
$('.fas_jquery_dropdown a').on('click',function(){
	$('.fas_jquery_dropdown ul').toggle();
	return false;
});
$('.fas_jquery_dropdown ul li a').on('click',function(){
	$(this).parents('.fas_jquery_dropdown').find('.fas_jquery_dropdown_box').text( $(this).text() );
	$(this).parents('.fas_jquery_dropdown').find('input:hidden').val( $(this).attr("data-value") );	
	return false;
});

FontAwesomeのアイコンを使ったドロップダウンのサンプルです。リストでメニューを作成しておき、ドロップダウンがクリックされると表示されます。リストを選択するとドロップダウンにテキストが挿入され、非表示のインプットに値が設定されるためフォームで使うこともできます。

ローティング

<div class="fas_jquery_loading"></div>	
body{
	margin: 0;
	padding: 0;
}
.fas_jquery_loading{
	/*
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	display: none;
	*/
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.8);
}
.fas_jquery_loading:before{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
    display: inline-block;
	width: 50px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	font-size: 50px;
	color: #fff;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f110';
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: none;
    animation-play-state: running;
    animation-name: fa-spin;	
}
$('#button').on('click',function(){
	$('.fas_jquery_loading').show();
	//処理
	$('.fas_jquery_loading').hide();
	return false;
});

処理中などに表示させるローディング画面のサンプルです。読み込み中やajaxなどの処理中に画面を触られたくない場合に表示させます。position: fixed;で画面全体に表示されるように設定しています。注意点としてbodyタグの余白を排除しておく必要があります。