FontAwesome CSS Buttons

This tutorial is for FA 4.7.0 which the majority of 1.8 themes are using.

The buttons will be styled from the input buttons.




Global.css

.btn-label {
	position: relative;
	left: -12px;
	display: inline-block;
	padding: 8px 10px;
	background: rgba(0,0,0,0.15);
	border-radius: 3px 0 0 3px;
}

.btn-labeled {
	padding-top: 0;
	padding-bottom: 0;
}

.btn {
}

.btn_text  {
	color: #fff !important;

}

.btn_text:hover {
	color: #fff !important;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
	opacity: 0.7;
}

Forum Display Templates
forumdisplay_newthread

<button type="button" class="btn btn-labeled btn_text">
                <span class="btn-label"><i style="font-size: 13px;" class="fa fa-plus-circle fa-fw"></i></span>
<a class="new_thread_button btn_text" href="newthread.php?fid={$fid}">{$lang->post_thread}</a></button>

Show Thread Templates
showthread_newreply

<button type="button" class="btn btn-labeled btn_text">
                <span class="btn-label"><i style="font-size: 13px;" class="fa fa-check fa-fw"></i></span><a class="new_reply_button btn_text" href="newreply.php?tid={$tid}">{$lang->new_reply}</a></button> 

showthread_newreply_closed

<button type="button" class="btn btn-labeled btn_text">
                <span class="btn-label"><i style="font-size: 13px;" class="fa fa-ban fa-fw"></i></span><a class="closed_button btn_text" href="newreply.php?tid={$tid}">{$lang->thread_closed}</a></button> &nbsp; 

showthread_newthread

<button type="button" class="btn btn-labeled btn_text">
                <span class="btn-label"><i style="font-size: 13px;" class="fa fa-pen fa-fw"></i></span><a class="new_thread_button btn_text" href="newthread.php?tid={$tid}">{$lang->post_thread}</a></button> &nbsp;

Reputation Templates
reputation_addlink

<button type="button" class="btn btn-labeled btn_text">
                <span class="btn-label"><i style="font-size: 13px;" class="fa fa-check fa-fw"></i></span><a class="new_reply_button btn_text" href="newreply.php?tid={$tid}">{$lang->new_reply}</a></button> 

I will add more buttons.


  FA Buttons.png (Size: 17.6 KB / Downloads: 2)