-->
 
CSS Webfont Icons

BERANDAARCHIVEQUR'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/*
Get Menu Like This...?
Please Visit Here Now
Posted On : 28 Oktober 2013 Time : 19.10
SHARE TO :
| | Powered By : C.(BH-elatos) | Copyright By : cuerosbhelatos | |