フォーム

フォームのコピペで使えるFontAwesomeサンプル集です。検索や入力フォームなどで使われるテキストボックスなどのフォームとFontAwesomeのアイコンを組み合わせたデザインをご紹介します。

アイコンが後ろについたテキストボックス

SAMPLE
CODE

HTML
COPY

<div class="fas_form_after">
	<input type="text" placeholder="検索">
</div>

CSS
COPY

.fas_form_after{
	position: relative;
	display: inline-block;
	line-height: 1;
}
.fas_form_after:after{
	position: absolute;
	top: 0;
	bottom: 0;
	right: 10px;
	margin: auto;
	width: 1em;
	height: 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;
	content: '\f002';
	color: #aaa;
}
.fas_form_after input[type="text"]{
	width: 300px;
	padding: 10px calc(1em + 20px) 10px 10px;
	border: 1px solid #aaa;
	background: #fff;
	color: #aaa;
}
.fas_form_after input[type="text"]:focus{
	outline:0;
}
.fas_form_after input[type="text"]::placeholder{
	color: #ccc;
}

テキストボックスの後ろのアイコンを付けたサンプルです。テキストボックスをdivタグで囲って擬似要素で後ろにアイコンを表示させています。検索ボックスなどでご利用ください。

アイコンが後ろについたパスワードボックス

SAMPLE
CODE

HTML
COPY

<div class="fas_form_password">
	<input type="password" placeholder="Password">
</div>

CSS
COPY

.fas_form_password{
	position: relative;
	display: inline-block;
	line-height: 1;
}
.fas_form_password:after{
	position: absolute;
	top: 0;
	bottom: 0;
	right: 10px;
	margin: auto;
	width: 1em;
	height: 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;
	content: '\f084';
	color: #aaa;
}
.fas_form_password input[type="password"]{
	width: 300px;
	padding: 10px calc(1em + 20px) 10px 10px;
	font-size: 1em;
	border: 1px solid #aaa;
	background: #fff;
	color: #aaa;
}
.fas_form_password input[type="password"]:focus{
	outline:0;
}
.fas_form_password input[type="password"]::placeholder{
	color: #ccc;
}

後ろのアイコンを表示させたパスワードボックスのサンプルです。type="password"でパスワード入力欄になっています。デザインの設定自体はテキストボックスとほぼ同様です。

アイコンが前にくるテキストボックス

SAMPLE
CODE

HTML
COPY

<div class="fas_form_before">
	<input type="text" placeholder="UserName">
</div>

CSS
COPY

.fas_form_before{
	position: relative;
	display: inline-block;
	line-height: 1;
}
.fas_form_before:before{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 10px;
	margin: auto;
	width: 1em;
	height: 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;
	content: '\f007';
	color: #aaa;
}
.fas_form_before input[type="text"]{
	width: 300px;
	padding: 10px 10px 10px calc(1em + 20px);
	line-height: 1em;
	border: 1px solid #aaa;
	background: #fff;
	color: #aaa;
}
.fas_form_before input[type="text"]:focus{
	outline:0;
}
.fas_form_before input[type="text"]::placeholder{
	color: #ccc;
}

テキストボックスの前にアイコンを表示させたサンプルです。後ろにアイコンを表示させた場合と同様にdivタグでテキストボックスを囲み擬似要素でアイコンを前に表示させています。

丸いテキストボックス

SAMPLE
CODE

HTML
COPY

<div class="fas_form_round">
	<input type="text" placeholder="検索">
</div>

CSS
COPY

.fas_form_round{
	position: relative;
	display: inline-block;
	line-height: 1;
}
.fas_form_round:after{
	position: absolute;
	top: 0;
	bottom: 0;
	right: 15px;
	margin: auto;
	width: 1em;
	height: 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;
	content: '\f002';
	color: #aaa;
}
.fas_form_round input[type="text"]{
	width: 300px;
	padding: 10px calc(1em + 25px) 10px 15px;
	border-radius: calc(1em + 5px);
	border: 1px solid #aaa;
	background: #fff;
	color: #aaa;
}
.fas_form_round input[type="text"]:focus{
	outline:0;
}
.fas_form_round input[type="text"]::placeholder{
	color: #ccc;
}

両端が丸いテキストボックのサンプルです。検索ボックスでよく見かけるデザインです。テキストボックスにborder-radiusで角丸の設定を入れることで両端を丸く表示させています。

内部の影がついたテキストボックス

SAMPLE
CODE

HTML
COPY

<div class="fas_form_shadow">
	<input type="text" placeholder="Mail">
</div>

CSS
COPY

.fas_form_shadow{
	position: relative;
	display: inline-block;
	line-height: 1;
}
.fas_form_shadow:before{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 10px;
	margin: auto;
	width: 1em;
	height: 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;
	content: '\f0e0';
	color: #aaa;
}
.fas_form_shadow input[type="text"]{
	width: 300px;
	padding: 10px 10px 8px calc(1em + 20px);
	border: 1px solid #aaa;
	background: #fff;
	color: #aaa;
	box-shadow: 2px 2px 2px 0 #ccc inset;
}
.fas_form_shadow input[type="text"]:focus{
	outline:0;
}
.fas_form_shadow input[type="text"]::placeholder{
	color: #ccc;
}

内部に影をつけて窪んだ感じを出したテキストボックスのサンプルです。影はbox-shadow: 〜 inset;で内部にできるように設定してあります。

下線のみのテキストボックス

SAMPLE
CODE

HTML
COPY

<div class="fas_form_borderbottom">
	<input type="text" placeholder="PhoneNumber">
</div>

CSS
COPY

.fas_form_borderbottom{
	position: relative;
	display: inline-block;
	line-height: 1;
}
.fas_form_borderbottom:before{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 10px;
	margin: auto;
	width: 1em;
	height: 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;
	content: '\f3cd';
	color: #aaa;
}
.fas_form_borderbottom input[type="text"]{
	width: 300px;
	padding: 10px 10px 8px calc(1em + 20px);	
	border: none;
	border-bottom: 1px solid #aaa;
	color: #aaa;
}
.fas_form_borderbottom input[type="text"]:focus{
	outline:0;
}
.fas_form_borderbottom input[type="text"]::placeholder{
	color: #ccc;
}

下線のみのテキストボックスのサンプルです。border: none;でテキストボックスの枠線を消したうえで、border-bottomで下線の設定をおこなっています。入力フォームなどで重宝しそうなデザインです。

テキストボックス＋ボタン

SAMPLE
CODE

HTML
COPY

<div class="fas_form_textbutton">
	<input type="text" placeholder="Search">
	<button></button>
</div>

CSS
COPY

.fas_form_textbutton{
	display: inline-block;
	line-height: 1;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
	align-items: stretch;
}
.fas_form_textbutton input[type="text"]{
	width: 300px;
	padding: 8px;
	background: #fff;
	border: 1px solid #aaa;
	border-right: none;
	color: #aaa;
}
.fas_form_textbutton input[type="text"]:focus{
	outline:0;
}
.fas_form_textbutton input[type="text"]::placeholder{
	color: #ccc;
}
.fas_form_textbutton button{
	border: none;
	background: #aaa;
	width: 60px;
}
.fas_form_textbutton button:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f002';
	color: #fff;
}

テキストボックスとアイコンのみのボタンを組み合わせたサンプルです。テキストボックスとボタンをdivタグで囲んでdisplay: flex;で横並びになるように設定しています。アイコンはボタンの擬似要素として表示しています。