Flat UI Button Awesome Modal Dialog

Multi Color Button Awesome Modal Dialog - Makin asyik aja  membuat tampilan blog dengan penuh warna Flat UI yang lebih berani dan ngejreng tentunya juga dikombinasikan dengan font awesome yang lebih simple. Untuk artikel kali masih terkait dengan Simple Flat UI Menu Modal Dialog , Simple Flat Ui Navigasi Menu , dan Flat UI Button Download Awesome yang telah saya share sebelumnya.

• DEMO

Untuk konsep dasarnya seperti dibawah ini :

CSS

<link href='http://googledrive.com/host/0B0QTgfBgnob0Q18zMVAzc0NtcXM' rel='stylesheet'/>

.btn1 {width:30px;
  background: #3498db;
  font-family: Arial;
  color: #ffffff;border-left:20px solid #2980b9; border-radius:3px;
  font-size: normal;
  padding: 10px;margin-right:2px;
  text-decoration: none;
}

.btn1:hover { background: #555;border-left:20px solid #444;
  text-decoration: none;
}

.btn2 {width:30px;
  background: #2ecc71;
  font-family: Arial;
  color: #ffffff;border-left:20px solid #27ae60; border-radius:3px;
  font-size: normal;
  padding: 10px;margin-right:2px;
  text-decoration: none;
}

.btn2:hover { background: #555;border-left:20px solid #444;
  text-decoration: none;
}

.btn3 {width:30px;
  background: #1abc9c;
  font-family: Arial;
  color: #ffffff;border-left:20px solid #16a085; border-radius:3px;
  font-size: normal;
  padding: 10px;margin-right:2px;
  text-decoration: none;
}

.btn3:hover { background: #555;border-left:20px solid #444;
  text-decoration: none;
}

.btn4 {width:30px;
  background: #f39c12;
  font-family: Arial;
  color: #ffffff;border-left:20px solid #e67e22; border-radius:3px;
  font-size: normal;
  padding: 10px;margin-right:2px;
  text-decoration: none;
}

.btn4:hover { background: #555;border-left:20px solid #444;
  text-decoration: none;
}

.btn5 {width:30px;
  background: #e74c3c;
  font-family: Arial;
  color: #ffffff;border-left:20px solid #c0392b; border-radius:3px;
  font-size: normal;
  padding: 10px;margin-right:2px;
  text-decoration: none;
}

.btn5:hover { background: #555;border-left:20px solid #444;
  text-decoration: none;
}
.vnbtn {max-width: 550px;
min-width: 180px;
  background: #bdc3c7;
  font-family: Arial;
  color: #999;border-left:20px solid #7f8c8d; border-radius:3px;
  font-size: normal;
  padding: 10px;margin-right:2px;
  text-decoration: none;
}

.vnbtn:hover { background: #555;border-left:20px solid #444;
  text-decoration: none;
}

JavaScript

Untuk cara pemasangan javascript modalnya bisa dilihat di sini

HTML

<ul>
<li><div class="btn1"><div class="md-modal md-effect-10" id="modal-10">
    <div class="md-content">
        <h3> DOWNLOAD <a class="md-close">&#215;</a></h3>
        <div>Anda bisa mengunduh file ini melalui link direct berikut ini
<br/>
<br/>
 <div class="vnbtn" style="text-align: center">
<a href="#" class="btn-wrap">DOWNLOAD</a>
<br/>
</div>
        </div>
    </div>
</div>
<button class="md-trigger" data-modal="modal-10"><i class="fa fa-download"></i></button>
<div class="md-overlay"></div></div></li>
..........................dan seterusnya
</ul>

Silakan pilih warnanya dan sesuaikan dengan kebutuhan, semoga berhasil..!!!

Simple Flat UI Menu Modal Dialog

Simple Flat UI Menu Modal Dialog - Memanfaatkan dialog modal untuk membungkus tombol button maupun widget akan semakin menambah keindahan dan kreasi pada sebuah blog/website. Dan tentunya masih menggunakan konsep Ui design sesuai perkembangannya saat ini, seperti simple flat ui navigasi menu dan menu metro ui efek modal dialog serta random post efek modal jquery ui yang sudah saya posting sebelumnya.

• DEMO

• DEMO CODE

Komponen yang digunakan :

CSS

/* Vn Navigasi
-------------------------*/
.vn-nav{
  background:#1abc9c;
  border-radius:6px;
  width:auto;
  padding-top:15px;
  padding-bottom:15px;
  font-size:14px;
  padding-left:20px;
  border-bottom: #16a085 3px solid;
  margin-bottom:10px;
}

.vn-nav ul { margin: 0; padding: 0; list-style-type: none; list-style-image: none; }
.vn-nav li { margin-right: 0px; display: inline; }
.vn-nav ul li a { text-decoration:none;  margin: 0px; padding: 15px 20px 15px 20px; color:#ffffff; }
.vn-nav li.current-menu-item a{ color: #fff; text-decoration:none; background-color:#16a085; }
.vn-nav li.current_page_item  { color: #fff; text-decoration:none; background-color:#16a085; }

/* Vn Simple Modal
-------------------------*/
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}

.modalDialog:target {
opacity:1;
pointer-events: auto;
}

.modalDialog > div {
width: 400px;height:auto;
position: relative;
margin: 5% auto;
padding: 5px 20px 13px 20px;
background: #34495e;color:#fff;
}

.close {
background: #2c3e50;
color: #16a085;padding:5px;border-radius:0 0 12px 0;
line-height: 16px;
position: absolute;
right: -55px;
text-align: center;
top: 0;
width: 16px;
text-decoration: none;
font-weight: bold;
}

.close:hover { background: #2c3e50;color:#e74c3c }

/* Vn Button
-------------------------*/

.vn-green a{
background-color:#27ae60;
  display:inline-block;
  position:relative;
  margin:30px 5px;
  padding:20px 20px 20px 80px;
  color:#fff;
  transition:all 0.4s ease
}

.vn-green a:hover{
  background:#2c3e50
}

HTML

<div class="vn-nav">
<ul>
  <li><a href="#openModal">Button</a>

<div id="openModal" class="modalDialog">
<div>
<a href="#close" title="Close" class="close">X</a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. </p>
<div class="vn-green" style="text-align: center;">
<a href="#">KLIK</a>
</div>
</div>
</div></li>
</ul>
</div>

Untuk kode sepenuhnya bisa lihat di link demo code diatas ...!!!

Simple Flat UI Navigasi Menu

Simple Flat UI Navigasi Menu - Penggunaan Flat UI elemen ke dalam menu navigasi blog seperti Simple Menu UI Efek Flip CSS3 dan Simple Tooltip Menu Dropdown CSS3 serta Simple Flat UI Subscribe Email yang masih bernuansa Ui style.

Sebagai Penampakan Sederhananya sebagai berikut :

• DEMO CODE

CSS

/* Main Colors
===============================*/
.ijo {background:#16A085;}
.ijo:checked {background:#1ABC9C;}

.biru {background:#2980B9;}
.biru:checked {background:#3498DB;}

.ijo-enom {background:#2ecc71;}
.ijo-enom:checked {background:#27ae60;}

.abang {background:#C0392B;}
.abang:checked {background:#E74C3C;}

.peteng {background:#2C3E50;}
.peteng:checked {background:#34495E;}

.kuning {background:#F39C12;}
.kuning:checked {background:#F1C40F;}

/* CSS Menus
===============================*/
nav {
  position:relative;
  width:700px;
  margin:30px auto;
  margin-bottom:40px;
  -webkit-border-radius:6px;
     -moz-border-radius:6px;
          border-radius:6px;
  padding:15px;
  text-align:left;
}

li {
  list-style:none;
  color:#fff;
  font-weight:600;
  display:inline-block;
}

li > a, a:visited {
  padding:15px;
  color:#fff;
  text-decoration:none;
  transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
}

li > a:hover {
  background:rgba(0, 0, 0, 0.1);
  transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
}

.nav-search {
  position:absolute;
  right:9px;
  top:11px;
  background:rgba(0, 0, 0, 0.1);
  -webkit-border-radius:6px;
     -moz-border-radius:6px;
          border-radius:6px;
  border:none;
  padding:5px;
  padding-left:15px;
  outline:none;
  transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
}

.nav-search:focus {
  background:#fff;
  font-weight:600;
  transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
}

.nav-search::-webkit-input-placeholder {
   color: #FFF;
}

.nav-search:-moz-placeholder {
   color: #FFF;
}

.nav-search::-moz-placeholder {
   color: #FFF;
}

.nav-search:-ms-input-placeholder {
   color: #FFF;
}

/* Search Elements
===============================*/
.search {
  padding:10px;
  width:300px;
  display:block;
  margin:0 auto;
  margin-bottom:10px;
  -webkit-border-radius:6px;
     -moz-border-radius:6px;
          border-radius:6px;
  border:none;
  color:#fff;
  outline:none;
}

.search:focus {
  background:#fff;
  border:2px solid #34495E;
  color:#34495E;
  font-weight:600;
}

.search::-webkit-input-placeholder {
   color: #FFF;
}

.search:-moz-placeholder {
   color: #FFF;
}

.search::-moz-placeholder {
   color: #FFF;
}

.search:-ms-input-placeholder {
   color: #FFF;
}

.search:-ms-input-placeholder {
   color: #FFF;
}

HTML

<nav class="ijo">
  <li><a href="#">Home</a></li>
  <li><a href="#">About Me</a></li>
  <li><a href="#">Site Map</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Contact Me</a></li>
  <input class="nav-search" type="text" placeholder="Search..."/>
</nav>

<nav class="abang">
  <li><a href="#">Home</a></li>
  <li><a href="#">About Me</a></li>
  <li><a href="#">Site Map</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Contact Me</a></li>
  <input class="nav-search" type="text" placeholder="Search..."/>
</nav>

<nav class="kuning">
  <li><a href="#">Home</a></li>
  <li><a href="#">About Me</a></li>
  <li><a href="#">Site Map</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Contact Me</a></li>
  <input class="nav-search" type="text" placeholder="Search..."/>
</nav>

<nav class="peteng">
  <li><a href="#">Home</a></li>
  <li><a href="#">About Me</a></li>
  <li><a href="#">Site Map</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Contact Me</a></li>
  <input class="nav-search" type="text" placeholder="Search..."/>
</nav>

<nav class="biru">
  <li><a href="#">Home</a></li>
  <li><a href="#">About Me</a></li>
  <li><a href="#">Site Map</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Contact Me</a></li>
  <input class="nav-search" type="text" placeholder="Search..."/>
</nav>

<nav class="ijo-enom">
  <li><a href="#">Home</a></li>
  <li><a href="#">About Me</a></li>
  <li><a href="#">Site Map</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Contact Me</a></li>
  <input class="nav-search" type="text" placeholder="Search..."/>
</nav>

Silakan pilih warna sesuai dengan selera anda dan ganti tanda # dengan url anda

Simple Flat UI Subscribe Email

Simple Flat UI Subscribe Email - Mungkin bisa dikatakan kelanjutan artikel sebelumnya tentang modifikasi contact form dengan gaya ui style dan tentunya masih menggunakan gaya flat ui yang di kombinasikan dengan menu ui awesome dan template flat ui portfolio design. Dan semuanya itu untuk membuat blog/web kita menjadi lebih indah dengan widget unik serta konsep warna Flat yang lagi ngetren saat ini.

• DEMO

• VIEW CODE

Komponen dasarnya :

CSS

     #vn-emailsubsocial {background:#34495e;
      width: 300px;
      height: 330px;
      border: 1px solid #ddd;
        border-radius: 5px 5px 0px 0px;
     }
     #vn-emailsubsocial .heading {
padding: 15px 25px;
line-height: 35px;
font-size: 26px;
font-weight: 600;
font-family: open sans;
color: #fff;
text-align: center;
background:#22313F;
     }
   #vn-emailsubsocial p {background:#34495e;
    font-family: open sans;
    font-size: 13px;
    color: #fff;
    line-height: 25px;
    padding: 10px 20px 0 20px;
    margin: 0;
   }
   #vn-emailsubsocial .emailsub {
    padding: 0px 20px 10px 20px;
   }
   #vn-emailsubsocial .emailsub input {
    color: rgb(170, 170, 170);
    padding: 10px;
    margin-top: 10px;
    font-size: 15px;
    font-family: open sans;
    width: 92%;
    border: 1px solid #ccc;
    border-bottom: 2px solid #ccc;
    border-radius: 5px;
    transition:border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
   }
   #vn-emailsubsocial .emailsub input:focus {
    border-color:#F4836A;
    outline: none;
    box-shadow: 0 0 2px 1px #F4836A;
   }
   #vn-emailsubsocial .emailsub .button {
    background: #F4836A;
    color: white!important;
    border:none;
    outline: none;
    border-bottom: 3px solid #B3614E;
    transition:background .4s linear;
    width: 90%;
    margin-right: 5%;
    margin-left: 5%;
    font-weight: 600;
    cursor:pointer;
   }
   #vn-emailsubsocial .emailsub .button:hover{
    background: #DD7761;
   }

HTML

<div id="vn-emailsubsocial">
<div class="heading">
Sign Up Here
              </div>
Isikan pesan yang ingin anda sampaikan disini<br />
<div class="emailsub">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=SamsurySites', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="name" placeholder="Your Name" type="text" />
               <input name="email" placeholder="Your Email" type="text" />
               <input name="uri" type="hidden" value="BloggerYard" />
               <input name="loc" type="hidden" value="en_US" />
                        <input class="button" type="submit" value="Sign Up Now!" />
              </form>
</div>
</div>

Ganti tulisan SamsurySites dengan nama feed rss blog anda

Demikian sedikit tips blog ui style kali ini semoga bermanfaat, baca juga Simple Tooltip Dropdown Menu CSS3

Modifikasi Contact Form Dengan Style UI

Modifikasi Contact Form UI Style - Dengan adanya penambahan fitur baru blogger yaitu Contact Form ( send feed back ), maka banyak sekali para blogger yang sudah memodifikasinya dengan tampilan yang berbeda dan menjadikannya widget unik blog. dan untuk kali ini saya juga akan mencoba membuat sedikit efek contact me ( contact form ) dengan sedikit nuansa metro UI style.

Untuk demonya bisa lihat link dibawah ini :

• DEMO

Berikut konsep dasar pembuatannya :

JavaScript

//<![CDATA[
$('body').append('<div class="floating-ct"><div class="floating-ct-head"><a href="#">Contact Me</a></div><div class="floating-ct-body"></div></div>');
$('.ContactForm').appendTo('.floating-ct-body');
var slide_up_ct = false;
$('.floating-ct-head a').click(function(){
 if (!slide_up_ct) {
 slide_up_ct = true;
 $('.floating-ct-body').slideDown();
 } else {
 slide_up_ct = false;
 $('.floating-ct-body').slideUp();
 }
});
//]]>

CSS

.ContactForm, .ContactForm .title {
 display: none;
}
.floating-ct {
 position: fixed;
 width: 250px;
 right: 0;
 bottom: 0;
 z-index: 999;
}
.floating-ct-head a:hover {
color: #fff;
background: #2c3e50;
}
.floating-ct-head a {border-radius:8px 0 0 0;
text-decoration:none;
padding: 5px 10px;
background: #16a085;
color:#fff;
font-weight: bold;
display: inline-block;
zoom: 1;
}
.floating-ct-body {
 height: 311px;
 background: #FD6CA3;
 border: 1px solid #FD6CA3;
 padding: 10px;
 display: none;
}
.floating-ct-head {
 text-align: right;
}
.floating-ct-body .ContactForm {
 margin: 0;
 display: block!important;
}

Anda juga bisa menjadikannya dalam sebuah widget unik dengan Add Gadget >> HTML/Javascript >> dan copas Kode di bawah ini :

<script type='text/javascript'>
//<![CDATA[
$('body').append('<div class="floating-ct"><div class="floating-ct-head"><a href="#no-move">Contact Me</a></div><div class="floating-ct-body"></div></div>');
$('.ContactForm').appendTo('.floating-ct-body');
var slide_up_ct = false;
$('.floating-ct-head a').click(function(){
 if (!slide_up_ct) {
 slide_up_ct = true;
 $('.floating-ct-body').slideDown();
 } else {
 slide_up_ct = false;
 $('.floating-ct-body').slideUp();
 }
});
//]]>
</script>
<style>
.ContactForm, .ContactForm .title {
 display: none;
}
.floating-ct {
 position: fixed;
 width: 250px;
 right: 0;
 bottom: 0;
 z-index: 999;
}
.floating-ct-head a:hover {
color: #fff;
background: #2c3e50;
}
.floating-ct-head a {border-radius:8px 0 0 0;
text-decoration:none;
padding: 5px 10px;
background: #16a085;
color:#fff;
font-weight: bold;
display: inline-block;
zoom: 1;
}
.floating-ct-body {
 height: 311px;
 background: #FD6CA3;
 border: 1px solid #FD6CA3;
 padding: 10px;
 display: none;
}
.floating-ct-head {
 text-align: right;
}
.floating-ct-body .ContactForm {
 margin: 0;
 display: block!important;
}
</style>

PENTING..!!!

Agar tips ini bisa berjalan dengan sempurna sebelumnya pasang dulu widget contact form bawaan blogger, kemudian pasang kode css ini sebelum kode ]]</b:skin>

.ContactForm {display:none}

Simple Menu UI Efek Flip CSS3

Layaknya simple tooltip dropdown menu css3 dan Flat UI menu efek flip css3 saya berikan contoh menu yang cukup simple menggunakan efek flip dari css3.  Menggunakan satu button icon dengan horisontal flip dan tombol close ( toggler ). Fitur responsive juga sudah diterapkan pada menu ini sehingga lebih mudah menyesuaikan ke semua perangkat browser.

• DEMO

• VIEW CODE

Komponen yang digunakan :

CSS

.iconicmenu {
    position: relative;
    height: 45px;
    overflow: hidden;
    }

.iconicmenu, .iconicmenu * {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }

.iconicmenu input[type="checkbox"] { /* checkbox used to toggle menu state */
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    }

.iconicmenu > label { /* Main label icon to toggle menu state */
    z-index: 1000;
    display: block;
    position: absolute;
    width: 40px;
    height: 40px;
    float: left;
    top: 0;
    left: 0;
    background: transparent;
    text-indent: -1000000px;
    border: 6px solid black; /* border color */
    border-width: 6px 0;
    cursor: pointer;
    -moz-transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in; /* transition for flipping label */
    }

.iconicmenu > label::after { /* inner stripes inside label */
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 18%;
    top: 19%;
    left: 0;
    border: 6px solid black; /* border color */
    border-width: 6px 0;
    -moz-transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in; /* transition for flipping label */
    }

.iconicmenu ul { /* UL menu inside container */
    margin: 0;
    padding: 0;
    position: absolute;
    margin-left: 40px;
    background: #eee;
    left: -100%; /* hide menu intially */
    height: 40px; /* height of menu */
    font: bold 14px Verdana;
    text-align: center;
    list-style: none;
    opacity: 0;
    -moz-border-radius: 0 5px 5px 0;
    -webkit-border-radius: 0 5px 5px 0;
    border-radius: 0 5px 5px 0;
    -moz-perspective: 10000px;
    perspective: 10000px;
    -moz-transition: all 0.5s ease-in;
    -webkit-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in; /* transition for animating UL in and out */
    }

.iconicmenu li {
    display: inline;
    margin: 0;
    padding: 0;
    }

.iconicmenu ul label { /* label button inside UL to close menu */
    cursor: pointer;
    position: relative;
    height: 100%;
    text-align: center;
    }

.iconicmenu ul label::after { /* label button x */
    content: "x";
    display: inline-block;
    line-height: 14px;
    color: white;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    width: 20px;
    height: 20px;
    background: #16a085;
    font-size: 15px;
    margin: 5px;
    margin-top: 10px;
    -moz-transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
    }

.iconicmenu input[type="checkbox"]:checked ~ label, .iconicmenu ul label:hover::after {
    -moz-transform: rotatey(180deg);
    -ms-transform: rotatey(180deg);
    -webkit-transform: rotatey(180deg);
    transform: rotatey(180deg); /* flip labels vertically onMouseover */
    }

.iconicmenu > label:hover, .iconicmenu > label:hover::after, .iconicmenu input[type="checkbox"]:checked ~ label, .iconicmenu input[type="checkbox"]:checked ~ label::after {
    border-color: darkred; /* highlight color of main menu label onMouseover */
    }

.iconicmenu input[type="checkbox"]:checked ~ ul {background:#22313F;
    left: 8px; /* Animate menu into view */
    opacity: 1;
    -moz-box-shadow: 1px 1px 5px gray;
    -webkit-box-shadow: 1px 1px 5px gray;
    box-shadow: 1px 1px 5px gray;
    }

.iconicmenu li a {
    display: block;
    float: left;
    text-align: center;
    text-decoration: none;
    color: #fff;
    margin: 0;
    padding: 10px;
    padding-right: 15px;
    height: 100%;
    }

.iconicmenu li a:hover {
    background: #1BA39C;
    color: white;
    }

@media screen and (max-width: 580px) {
    .iconicmenu input[type="checkbox"]:checked ~ label {
        display: none;
        }
    .iconicmenu input[type="checkbox"]:checked ~ ul {
        margin-left: 0;
        }
    }

@media screen and (max-width: 560px) {
    .iconicmenu {
        overflow: visible;
        }
    .iconicmenu ul {
        height: auto;
        }
    .iconicmenu ul li {
        min-width: 200px;;
        display: block;
        }
    .iconicmenu ul li a {
        float: none;
        text-align: left;
        }
    }

HTML

<div class="iconicmenu">
<input type="checkbox" id="togglebox" />
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">MENU 1</a></li>
<li><a href="#">MENU 2</a></li>
<li><a href="#">MENU 3</a></li>
<li><a href="#">MENU 4</a></li>
<li><label for="togglebox"></label></li>
</ul>

Ganti tanda # untuk menyesuaikan url menu yang akan di tampilkan..!!!

Update List Font Icon Awesome V4.1.0

Update Font icon Awesome v.4.1.0 dengan penambahan 71 icon akan semakin mempermudah kita berkreasi dengan tampilan awesome sebagai pengganti gambar di blog, seperti artikel sebelumnya tentang kostumisasi font icon awesome v4.0.3.

Untuk dapat meggunakan icon ini install CSS iconnya :

<link href='//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css' rel='stylesheet'/>

Atau import melalui CSS code:

@import url(http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css);

Penggunaan CSS valuenya masih sama dengan icon versi sebelumnya, dan untuk menyisipkan value content pada pseudo element seperti dibawah ini :

CSS PSEUDO ELEMENT

.element {
    position: relative;
}


.element:before {
    content: "\f000";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    color: #000;
    font-size: 18px;
    padding-right: 0.5em;
    position: absolute;
    top: 10px;
    left: 0;
}

Memberikan efek warna menggunakan css :

i.fa-codepen{color:#d35400}

Penulisannya masih sama seperti versi 4.0.3 <i class="fa fa-codepen"></i> fa-codepen

List selengkapnya bisa anda kunjungi Fontawesome V 4.1.0

71 NEW LIST ICON FONTAWESOME V 4.1.0

• fa-car "f1b9"
• fa-bomb "f1e2"
• fa-deviantart "f1bd"
• fa-envelope-square "f199"
• fa-file-code-o "f1c9"
• fa-file-pdf-o "f1c1"
• fa-file-audio-o "f1c7"
• fa-ge "f1d1"
• fa-graduation-cap "f19d"
• fa-institution "f19c"
• fa-life-bouy "f1cd"
• fa-openid "f19b"
• fa-paw "f1b0"
• fa-qq "f1d6"
• fa-reddit "f1a1"
• fa-share-alt "f1e0"
• fa-soundcloud "f1be"
• fa-steam "f1b6"
• fa-support "f1cd"
• fa-university "f19c"
• fa-wordpress "f19a"
• fa-bank "f19c"
• fa-building "f1ad"
• fa-circle-o-notch "f1ce"
• fa-cubes "f1b3"
• fa-digg "f1a6"
• fa-fax "f1ac"
• fa-file-excel-o "f1c3"
• fa-file-photo-o "f1c5"
• fa-file-video-o "f1c8"
• fa-git "f1d3"
• fa-hacker-news "f1d4"
• fa-joomla "f1aa"
• fa-life-ring "f1cd"
• fa-paper-plane "f1d8"
• fa-pied-piper "f1a7"
• fa-ra "f1d0"
• fa-reddit-square "f1a2"
• fa-share-alt-square "f1e1"
• fa-space-shuttle "f197"
• fa-steam-square "f1b7"
• fa-taxi "f1ba"
• fa-vine "f1ca"
• fa-yahoo "f19e"
• fa-behance "f1b4"
• fa-cab "f1ba"
• fa-circle-thin "f1db"
• fa-database "f1c0"
• fa-drupal "f1a9"
• fa-file-archive-o "f1c6"
• fa-file-image-o "f1c5"
• fa-file-picture-o "f1c5"
• fa-file-word-o "f1c2"
• fa-git-square "f1d2"
• fa-header "f1dc"
• fa-jsfiddle "f1cc"
• fa-life-saver "f1cd"
• fa-paper-plane-o "f1d9"
• fa-slack "f198"
• fa-spoon "f1b1"
• fa-stumbleupon "f1a4"
• fa-tencent-weibo "f1d5"
• fa-wechat "f1d7"
• fa-behance-square "f1b5"
• fa-car "f1b9"
• fa-delicious "f1a5"
• fa-empire "f1d1"
• fa-file-audio-o "f1c7"
• fa-file-movie-o "f1c8"
• fa-file-powerpoint-o "f1c4"
• fa-file-zip-o "f1c6"
• fa-google "f1a0"
• fa-history "f1da"
• fa-language "f1ab"
• fa-mortar-board "f19d"
• fa-paragraph "f1dd"
• fa-pied-piper-alt "f1a7"
• fa-recycle "f1b8"
• fa-send-o "f1d9"
• fa-sliders "f1de"
• fa-spotify "f1bc"
• fa-stumbleupon-circle "f1a3"
• fa-tree "f1bb"
• fa-weixin "f1d7"
• fa-cubes "f1b3"
• fa-female "f182"