Membuat Ikon External Link Pada Setiap Link

Membuat Ikon External Link Pada Setiap Link

Saat ini seringkali saya lihat link atau anchor text (baik itu external link atau pun internal link) dengan ikon font awesome di sampingnya pada sebuah blog. Dan setelah saya cari tahu, nama ikon tersebut adalah ikon external link. Melihat keunikan itu, membuat saya iri dan ingin menggunakannya pada blog ini.

Akhirnya saya mencoba untuk mencari tutorialnya di google, dan ternyata blog kompi ajaib memberikan tutorialnya. Nggak pake lama, saya pun langsung mempraktekannya dan langsung berhasil. Bisa Anda lihat contoh anchor text dengan ikon external link font awesome di bawah ini.

Jika Anda tertarik untuk mencobanya, silahkan letakkan kode CSS di bawah ini di atas kode </head>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
.post-body a{font-weight:700;position:relative;padding-right:20px;display:inline-block;}
.post-body a:before{content:'f08e';font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;color:#333;position:absolute;bottom:0;right:0;font-size:14px;}
/*]]>*/
</style>
</b:if>

Pastikan di blog Anda terdapat script pemanggil link font awesome seperti di bawah ini yang berada di atas kode </head>. Jika tidak ada, silahkan letakkan script di bawah ini di atas kode </head> atau Anda juga bisa menerapkannya dengan cara ini.

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

Setelah itu simpan template, maka secara otomatis setiap anchor text atau pun link yang ada di postingan blog Anda memiliki ikon font awesome di sebelah kanannya.

Sekian tutorial cara membuat ikon external link font awesome pada setiap link. Semoga bermanfaat.

Leave a Reply