Custom List Style – Font Awesome

oleh pada 21 July 2018 0 Komentar
Custom List Style – Font Awesome

Halo apa kabar teman-teman, artikel kali ini kita akan mencoba membuat sebuah list dengan menggunakan bantuan font-awesome. Font Awesome sendiri merupakan sekumpulan icon (tool kit) yang sudah disediakan secara gratis, jadi kita tinggal mengambilnya kemudian kita sedikit melakukan konfigurasi, supaya dapat diaktifkan.

Bagi sebagian web developer, membuat list secara manual akan sangat merepotkan, karena disetiap tag HTML List kita merubah menambahkan icon satu-persatu. Ternyata ada triknya lho, kita bisa menggunakan Pseudo CSS Before.

Langsung saja

Buat file index.html

<!DOCTYPE html>
<html>
<head>
	<title>List with Font Awesome | YELLOWWEB.ID - Kursus Web di Bekasi</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
	<div id="wrapper">
		<div id="menu">
			<h3>Pilih Paket Kursus <i class="fa fa-book"></i></h3>
			<ol>
				<li><a href="#">Kursus Web Desain</a></li>
				<li><a href="#">Kursus Web Programming</a></li>
				<li><a href="#">Kursus Web Master</a></li>
				<li><a href="#">Kursus WordPress</a></li>
				<li><a href="#">Kursus Bootstrap</a></li>
			</ol>
		</div>

		<em>Untuk artikel yang lainnya silahkan kunjungi Blog kami di <a class="btn-visit" href="https://www.yellowweb.id/blog" target="_blank">https://www.yellowweb.id/blog</a></em>

	</div>

</body>
</html>

kemudian buat file style.css

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');

/* CSS Reset */

*{
	padding: 0;
	margin: 0;
}

/* BODY */
body{
    font-family: 'Open Sans', sans-serif;
    font-family: 14px;
}

/* WRAPPER */
#wrapper{
	/*background: #2ecc71;*/
	height: 200px;
	width: 450px;
	margin: auto;
	margin-top: 100px;
}

/* MENU */
#menu{
	background: #2c3e50;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to right, #3498db, #2c3e50);  /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to right, #3498db, #2c3e50); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */


	height: 200px;
	padding: 20px;
	border-radius: 10px;
	margin-bottom: 10px;
}

#menu ol li{
	list-style: none;
	line-height: 25px;
	display: inline-block;
}

#menu ol li:before{
	content: "\f0a4";
	font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
	font-size: 14px;
}

#menu ol li a{
	text-decoration: none;
	margin-left: 5px;
	margin-right: 5px;
	color: #ffffff;
}

#menu ol li a:hover{
	color: #000000;
}

#menu ol li:hover{
	color: #ffff00;
}

h3{
	font-size: 25px;
	margin-bottom: 10px;
}

.btn-visit{
	text-decoration: none;
	color: red;
}

.btn-visit:hover{
	color: green;
	text-decoration: underline;
}

Pada tutorial diatas, secara otomatis list icon berubah. Kita tidak meletakkan pada tag HTML melainkan di CSS.

Untuk sumbernya kalian bisa ambil disini:
1. Font Awesome Icon
2. Font Awesome Content Value
3. Pseudo CSS Before

Comments are closed.