-->
 
CSS Webfont Icons

BERANDANEW POSTARCHIVEQUR'ANYASINTAHLILAMALAN

     
P
ernahkah kita melihat sebuah web yang icon-iconnya seperti⻠saat loadingnya belum sempurna?Pastinya web tersebut menggunakan CSS Webfont icons. Lalu mengapa icon yang muncul bisa seperti itu?hal tersebut terjadi dikarenakan saat proses memuat font-face untuk icon belum selesai,dan terkadang membutuhkan sedikit waktu untuk tampil sempurna.
CSS Webfonts icon yang saya tulis ini adalah dari Awesome webfont icons versi 3.2.1. Webfonts Icon ini terlihat simple dan elegant,selain itu untuk custom juga gampang dan mudah hanya dengan menggunakan CSS untuk merubah tampilannya,dari ukuran dan juga warnannya. Apabila sobat tertarik untuk mencobannya silahkan lihat dulu sekilas previewnya di bawah ini.
Dibawah ini adalah tampilan kumpulan Awesome Webfonts icons versi 3.2.1,juga kode Css dan kode Html-nya.

Preview iconsCSS&HTML code
<link href='//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css' rel='stylesheet'/>
  1. <i class="icon-glass"></i>
  2. <i class="icon-music"></i>
  3. <i class="icon-envelope-alt"></i>
  4. <i class="icon-heart"></i>
  5. <i class="icon-star"></i>
  6. <i class="icon-star-empty"></i>
  7. <i class="icon-user"></i>
  8. <i class="icon-film"></i>
  9. <i class="icon-th-large"></i>
  10. <i class="icon-th"></i>
  11. <i class="icon-th-list"></i>
  12. <i class="icon-ok"></i>
  13. <i class="icon-remove"></i>
  14. <i class="icon-zoom-in"></i>
  15. <i class="icon-zoom-out"></i>
  16. <i class="icon-off"></i>
  17. <i class="icon-signal"></i>
  18. <i class="icon-cog"></i>
  19. <i class="icon-trash"></i>
  20. <i class="icon-home"></i>
  21. <i class="icon-file-alt"></i>
  22. <i class="icon-time"></i>
  23. <i class="icon-road"></i>
  24. <i class="icon-download-alt"></i>
  25. <i class="icon-download"></i>
  26. <i class="icon-upload"></i>
  27. <i class="icon-inbox"></i>
  28. <i class="icon-play-circle"></i>
  29. <i class="icon-repeat"></i>
  30. <i class="icon-refresh"></i>
  31. <i class="icon-list-alt"></i>
  32. <i class="icon-lock"></i>
  33. <i class="icon-flag"></i>
  34. <i class="icon-headphones"></i>
  35. <i class="icon-volume-off"></i>
  36. <i class="icon-volume-down"></i>
  37. <i class="icon-volume-up"></i>
  38. <i class="icon-qrcode"></i>
  39. <i class="icon-barcode"></i>
  40. <i class="icon-tag"></i>
  41. <i class="icon-tags"></i>
  42. <i class="icon-book"></i>
  43. <i class="icon-bookmark"></i>
  44. <i class="icon-print"></i>
  45. <i class="icon-camera"></i>
  46. <i class="icon-font"></i>
  47. <i class="icon-bold"></i>
  48. <i class="icon-italic"></i>
  49. <i class="icon-text-height"></i>
  50. <i class="icon-text-width"></i>
  51. <i class="icon-align-left"></i>
  52. <i class="icon-align-center"></i>
  53. <i class="icon-align-right"></i>
  54. <i class="icon-align-justify"></i>
  55. <i class="icon-list"></i>
  56. <i class="icon-indent-left"></i>
  57. <i class="icon-indent-right"></i>
  58. <i class="icon-facetime-video"></i>
  59. <i class="icon-picture"></i>
  60. <i class="icon-pencil"></i>
  61. <i class="icon-map-marker"></i>
  62. <i class="icon-tint"></i>
  63. <i class="icon-edit"></i>
  64. <i class="icon-share"></i>
  65. <i class="icon-check"></i>
  66. <i class="icon-move"></i>
  67. <i class="icon-step-backward"></i>
  68. <i class="icon-fast-backward"></i>
  69. <i class="icon-backward"></i>
  70. <i class="icon-play"></i>
  71. <i class="icon-pause"></i>
  72. <i class="icon-stop"></i>
  73. <i class="icon-forward"></i>
  74. <i class="icon-fast-forward"></i>
  75. <i class="icon-step-forward"></i>
  76. <i class="icon-eject"></i>
  77. <i class="icon-chevron-left"></i>
  78. <i class="icon-chevron-right"></i>
  79. <i class="icon-plus-sign"></i>
  80. <i class="icon-minus-sign"></i>
  81. <i class="icon-remove-sign"></i>
  82. <i class="icon-ok-sign"></i>
  83. <i class="icon-question-sign"></i>
  84. <i class="icon-info-sign"></i>nbsp
  85. <i class="icon-screenshot"></i>
  86. <i class="icon-remove-circle"></i>
  87. <i class="icon-ok-circle"></i>
  88. <i class="icon-ban-circle"></i>
  89. <i class="icon-arrow-left"></i>
  90. <i class="icon-arrow-right"></i>
  91. <i class="icon-arrow-up"></i>
  92. <i class="icon-arrow-down"></i>
  93. <i class="icon-share-alt"></i>
  94. <i class="icon-resize-full"></i>
  95. <i class="icon-resize-small"></i>
  96. <i class="icon-plus"></i>
  97. <i class="icon-minus"></i>
  98. <i class="icon-asterisk"></i>
  99. <i class="icon-exclamation-sign"></i>
  100. <i class="icon-gift"></i>
  101. <i class="icon-leaf"></i>
  102. <i class="icon-fire"></i>
  103. <i class="icon-eye-open"></i>
  104. <i class="icon-eye-close"></i>
  105. <i class="icon-warning-sign"></i>
  106. <i class="icon-plane"></i>
  107. <i class="icon-calendar"></i>
  108. <i class="icon-random"></i>
  109. <i class="icon-comment"></i>
  110. <i class="icon-magnet"></i>
  111. <i class="icon-chevron-up"></i>
  112. <i class="icon-chevron-down"></i>
  113. <i class="icon-retweet"></i>
  114. <i class="icon-shopping-cart"></i>
  115. <i class="icon-folder-close"></i>
  116. <i class="icon-folder-open"></i>
  117. <i class="icon-resize-vertical"></i>
  118. <i class="icon-resize-horizontal"></i>
  119. <i class="icon-bar-chart"></i>
  120. <i class="icon-twitter-sign"></i>
  121. <i class="icon-facebook-sign"></i>
  122. <i class="icon-camera-retro"></i>
  123. <i class="icon-key"></i>
  124. <i class="icon-cogs"></i>
  125. <i class="icon-comments"></i>
  126. <i class="icon-thumbs-up-alt"></i>
  127. <i class="icon-thumbs-down-alt"></i>
  128. <i class="icon-star-half"></i>
  129. <i class="icon-heart-empty"></i>
  130. <i class="icon-signout"></i>
  131. <i class="icon-linkedin-sign"></i>
  132. <i class="icon-pushpin"></i>
  133. <i class="icon-external-link"></i>
  134. <i class="icon-signin"></i>
  135. <i class="icon-trophy"></i>
  136. <i class="icon-github-sign"></i>
  137. <i class="icon-upload-alt"></i>
  138. <i class="icon-lemon"></i>
  139. <i class="icon-phone"></i>
  140. <i class="icon-check-empty"></i>
  141. <i class="icon-bookmark-empty"></i>
  142. <i class="icon-phone-sign"></i>
  143. <i class="icon-twitter"></i>
  144. <i class="icon-facebook"></i>
  145. <i class="icon-github"></i>
  146. <i class="icon-unlock"></i>
  147. <i class="icon-credit-card"></i>
  148. <i class="icon-rss"></i>
  149. <i class="icon-hdd"></i>
  150. <i class="icon-bullhorn"></i>
  151. <i class="icon-bell"></i>
  152. <i class="icon-certificate"></i>
  153. <i class="icon-hand-right"></i>
  154. <i class="icon-hand-left"></i>
  155. <i class="icon-hand-up"></i>
  156. <i class="icon-hand-down"></i>
  157. <i class="icon-circle-arrow-left"></i>
  158. <i class="icon-circle-arrow-right"></i>
  159. <i class="icon-circle-arrow-up"></i>
  160. <i class="icon-circle-arrow-down"></i>
  161. <i class="icon-globe"></i>
  162. <i class="icon-wrench"></i>
  163. <i class="icon-tasks"></i>
  164. <i class="icon-filter"></i>
  165. <i class="icon-briefcase"></i>
  166. <i class="icon-fullscreen"></i>
  167. <i class="icon-group"></i>
  168. <i class="icon-link"></i>
  169. <i class="icon-cloud"></i>
  170. <i class="icon-beaker"></i>
  171. <i class="icon-cut"></i>
  172. <i class="icon-copy"></i>
  173. <i class="icon-paper-clip"></i>
  174. <i class="icon-save"></i>
  175. <i class="icon-sign-blank"></i>
  176. <i class="icon-reorder"></i>
  177. <i class="icon-list-ul"></i>
  178. <i class="icon-list-ol"></i>
  179. <i class="icon-strikethrough"></i>
  180. <i class="icon-underline"></i>
  181. <i class="icon-table"></i>
  182. <i class="icon-magic"></i>
  183. <i class="icon-truck"></i>
  184. <i class="icon-pinterest"></i>
  185. <i class="icon-pinterest-sign"></i>/li>
  186. <i class="icon-google-plus-sign"></i>
  187. <i class="icon-google-plus"></i>
  188. <i class="icon-money"></i>
  189. <i class="icon-caret-down"></i>
  190. <i class="icon-caret-left"></i>
  191. <i class="icon-caret-right"></i>
  192. <i class="icon-columns"></i>
  193. <i class="icon-sort"></i>
  194. <i class="icon-sort-down"></i>
  195. <i class="icon-sort-up"></i>
  196. <i class="icon-envelope"></i>
  197. <i class="icon-linkedin"></i>
  198. <i class="icon-undo"></i>
  199. <i class="icon-legal"></i>
  200. <i class="icon-dashboard"></i>
  201. <i class="icon-comment-alt"></i>
  202. <i class="icon-comments-alt"></i>
  203. <i class="icon-bolt"></i>
  204. <i class="icon-sitemap"></i>
  205. <i class="icon-umbrella"></i>
  206. <i class="icon-paste"></i>
  207. <i class="icon-lightbulb"></i>
  208. <i class="icon-exchange"></i>
  209. <i class="icon-cloud-download"></i>
  210. <i class="icon-cloud-upload"></i>
  211. <i class="icon-user-md"></i>
  212. <i class="icon-stethoscope"></i>
  213. <i class="icon-suitcase"></i>
  214. <i class="icon-bell-alt"></i>
  215. <i class="icon-coffee"></i>
  216. <i class="icon-food"></i>
  217. <i class="icon-file-text-alt"></i>
  218. <i class="icon-building"></i>
  219. <i class="icon-ambulance"></i>
  220. <i class="icon-medkit"></i>
  221. <i class="icon-fighter-jet"></i>
  222. <i class="icon-beer"></i>
  223. <i class="icon-h-sign"></i>
  224. <i class="icon-plus-sign-alt"></i>
  225. <i class="icon-double-angle-left"></i>
  226. <i class="icon-double-angle-up"></i>
  227. <i class="icon-double-angle-down"></i>
  228. <i class="icon-angle-left"></i>
  229. <i class="icon-angle-right"></i>
  230. <i class="icon-angle-up"></i>
  231. <i class="icon-angle-down"></i>
  232. <i class="icon-desktop"></i>
  233. <i class="icon-laptop"></i>
  234. <i class="icon-tablet"></i>
  235. <i class="icon-mobile-phone"></i>
  236. <i class="icon-circle-blank"></i>
  237. <i class="icon-quote-left"></i>
  238. <i class="icon-quote-right"></i>
  239. <i class="icon-spinner"></i>
  240. <i class="icon-circle"></i>
  241. <i class="icon-reply"></i>
  242. <i class="icon-github-alt"></i>
  243. <i class="icon-folder-close-alt"></i>
  244. <i class="icon-folder-open-alt"></i>
  245. <i class="icon-expand-alt"></i>
  246. <i class="icon-collapse-alt"></i>
  247. <i class="icon-smile"></i>
  248. <i class="icon-frown"></i>
  249. <i class="icon-meh"></i>
  250. <i class="icon-gamepad"></i>
  251. <i class="icon-keyboard"></i>
  252. <i class="icon-flag-alt"></i>
  253. <i class="icon-flag-checkered"></i>
  254. <i class="icon-terminal"></i>
  255. <i class="icon-code"></i>
  256. <i class="icon-reply-all"></i>
  257. <i class="icon-mail-reply-all"></i>
  258. <i class="icon-star-half-empty"></i>
  259. <i class="icon-location-arrow"></i>
  260. <i class="icon-crop"></i>
  261. <i class="icon-code-fork"></i>
  262. <i class="icon-unlink"></i>
  263. <i class="icon-question"></i>
  264. <i class="icon-info"></i>
  265. <i class="icon-exclamation"></i>
  266. <i class="icon-superscript"></i>
  267. <i class="icon-subscript"></i>
  268. <i class="icon-eraser"></i>
  269. <i class="icon-puzzle-piece"></i>
  270. <i class="icon-microphone"></i>
  271. <i class="icon-microphone-off"></i>
  272. <i class="icon-shield"></i>
  273. <i class="icon-calendar-empty"></i>
  274. <i class="icon-fire-extinguisher"></i>
  275. <i class="icon-rocket"></i>
  276. <i class="icon-maxcdn"></i>
  277. <i class="icon-chevron-sign-left"></i>
  278. <i class="icon-chevron-sign-right"></i>
  279. <i class="icon-chevron-sign-up"></i>
  280. <i class="icon-chevron-sign-down"></i>
  281. <i class="icon-html5"></i>
  282. <i class="icon-css3"></i>
  283. <i class="icon-anchor"></i>
  284. <i class="icon-unlock-alt"></i>
  285. <i class="icon-bullseye"></i>
  286. <i class="icon-ellipsis-horizontal"></i>
  287. <i class="icon-ellipsis-vertical"></i>
  288. <i class="icon-rss-sign"></i>
  289. <i class="icon-play-sign"></i>
  290. <i class="icon-ticket"></i>
  291. <i class="icon-minus-sign-alt"></i>
  292. <i class="icon-check-minus"></i>
  293. <i class="icon-level-up"></i>
  294. <i class="icon-level-down"></i>
  295. <i class="icon-check-sign"></i>
  296. <i class="icon-edit-sign"></i>
  297. <i class="icon-external-link-sign"></i>
  298. <i class="icon-share-sign"></i>
  299. <i class="icon-compass"></i>
  300. <i class="icon-collapse"></i>
  301. <i class="icon-collapse-top"></i>
  302. <i class="icon-expand"></i>
  303. <i class="icon-eur"></i>
  304. <i class="icon-gbp"></i>
  305. <i class="icon-usd"></i>
  306. <i class="icon-inr"></i>
  307. <i class="icon-jpy"></i>
  308. <i class="icon-cny"></i>
  309. <i class="icon-krw"></i>
  310. <i class="icon-btc"></i>
  311. <i class="icon-file"></i>/li>
  312. <i class="icon-file-text"></i>
  313. <i class="icon-sort-by-alphabet"></i>
  314. <i class="icon-sort-by-alphabet-alt"></i>
  315. <i class="icon-sort-by-attributes"></i>
  316. <i class="icon-sort-by-attributes-alt"></i>
  317. <i class="icon-sort-by-order-alt"></i>
  318. <i class="icon-thumbs-up"></i>
  319. <i class="icon-thumbs-down"></i>
  320. <i class="icon-youtube-sign"></i>
  321. <i class="icon-youtube"></i>
  322. <i class="icon-xing"></i>
  323. <i class="icon-xing-sign"></i>
  324. <i class="icon-youtube-play"></i>
  325. <i class="icon-dropbox"></i>
  326. <i class="icon-stackexchange"></i>
  327. <i class="icon-instagram"></i>
  328. <i class="icon-flickr"></i>
  329. <i class="icon-adn"></i>
  330. <i class="icon-bitbucket"></i>
  331. <i class="icon-bitbucket-sign"></i>
  332. <i class="icon-tumblr"></i>
  333. <i class="icon-tumblr-sign"></i>
  334. <i class="icon-long-arrow-down"></i>
  335. <i class="icon-long-arrow-up"></i>
  336. <i class="icon-long-arrow-left"></i>
  337. <i class="icon-long-arrow-right"></i>
  338. <i class="icon-apple"></i>
  339. <i class="icon-windows"></i>
  340. <i class="icon-android"></i>
  341. <i class="icon-linux"></i>
  342. <i class="icon-dribble"></i>
  343. <i class="icon-skype"></i>
  344. <i class="icon-foursquare"></i>
  345. <i class="icon-trello"></i>
  346. <i class="icon-male"></i>
  347. <i class="icon-gittip"></i>
  348. <i class="icon-sun"></i>
  349. <i class="icon-moon"></i>
  350. <i class="icon-archive"></i>
  351. <i class="icon-bug"></i>
  352. <i class="icon-vk"></i>
  353. <i class="icon-weibo"></i>
  354. <i class="icon-renren"></i>
B
agaimana sobat?Lumayan banyak sekali kan CSS Webfont Icons ini. Untuk pemanggilan(embed)dari CSS Webfont icon ini adalah dengan menggunakan kode html[\f000,\f002,\f003,\f004dst]yang diselipkan dalam CSS Pseudo element(before/after)seperti ini contohnya[.icon-glass:before{content:"\f000"}]. Apabila sobat ingin lebih jelas tentang cara penggunaan dan pemakaian dari CSS Webfont Icons ini,silahkan coba bereksperimen atau juga dengan mengunjungi sourcenya langsung yaitu di http://fortawesome.github.io/Font-Awesome/.
Sekian dulu sobat sedikit yang saya tahu tentang CSS Webfont Icons,semoga artikel yang singkat,tentang CSS Webfont Icons ini bisa sedikit bermanfaat...!!!
* Sumber artikel :http://fortawesome.github.io/Font-Awesome/*
Posted On : 28 Oktober 2013 Time : 19.10
SHARE TO :
| | Powered By : C.(BH-Elatos) | Copyright By : binkbeNK | |