Bootstrap eğitim serimize devam ediyoruz.Bu derste bootsrap da bulunan
font iconları göreceğiz.Şuan en popüler font icon seti
Font Awesome de bulunmakta.Bootstrap ise
Glyphicon setini kullanmakta.Font Awesome ile Glyphicon bir birine çok benziyor.Bootstrap da hazır olarak tam 200 tane icon bize sunmakta.Bu iconları bir span yaratıp classına font ismini yazdığımızda icon oluşmakta.Örnek de tüm iconların ismini bulabilirsiniz.
İndir : http://ustaderslik.com/dosya/bootstrap-İcons.zip
İncele : http://ustaderslik.com/ornek/bootstrap-İcons/
<span class="glyphicon-class">glyphicon glyphicon-plus</span>
Koyduğumuz yerde artı iconu çıkacaktır.
Font iconun faydalarından bahsedecek olursak,kolayca css ile
boyut,renk,arkaplan,açı vs gibi css ile edebildiğimiz her şeyi uygulayabiliyoruz.Buda tasarımlarımız da özgünlük katmamıza olanak sağlıyor.
Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-theme.min.css" />
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<title>UstaDerslik.com</title>
<style type="text/css">
.ortala{width:1000px;margin:auto;margin-top:25px;text-align:Center;}
.isim{display:inline-block;width:300px;height:27px;line-height:24px;background:#f6f6f6;font-size:14px;}
.glyphicon{color:#15d4f5;font-size:20px;}
</style>
</head>
<body>
<div class="ortala">
<span class="glyphicon glyphicon-asterisk"></span>
<span class="isim">glyphicon glyphicon-asterisk</span>
<span class="glyphicon glyphicon-plus"></span>
<span class="isim">glyphicon glyphicon-plus</span>
<span class="glyphicon glyphicon-euro"></span>
<span class="isim">glyphicon glyphicon-euro</span>
<span class="glyphicon glyphicon-minus"></span>
<span class="isim">glyphicon glyphicon-minus</span>
<span class="glyphicon glyphicon-cloud"></span>
<span class="isim">glyphicon glyphicon-cloud</span>
<span class="glyphicon glyphicon-envelope"></span>
<span class="isim">glyphicon glyphicon-envelope</span>
<span class="glyphicon glyphicon-pencil"></span>
<span class="isim">glyphicon glyphicon-pencil</span>
<span class="glyphicon glyphicon-glass"></span>
<span class="isim">glyphicon glyphicon-glass</span>
<span class="glyphicon glyphicon-music"></span>
<span class="isim">glyphicon glyphicon-music</span>
<span class="glyphicon glyphicon-search"></span>
<span class="isim">glyphicon glyphicon-search</span>
<span class="glyphicon glyphicon-heart"></span>
<span class="isim">glyphicon glyphicon-heart</span>
<span class="glyphicon glyphicon-star"></span>
<span class="isim">glyphicon glyphicon-star</span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="isim">glyphicon glyphicon-star-empty</span>
<span class="glyphicon glyphicon-user"></span>
<span class="isim">glyphicon glyphicon-user</span>
<span class="glyphicon glyphicon-film"></span>
<span class="isim">glyphicon glyphicon-film</span>
<span class="glyphicon glyphicon-th-large"></span>
<span class="isim">glyphicon glyphicon-th-large</span>
<span class="glyphicon glyphicon-th"></span>
<span class="isim">glyphicon glyphicon-th</span>
<span class="glyphicon glyphicon-th-list"></span>
<span class="isim">glyphicon glyphicon-th-list</span>
<span class="glyphicon glyphicon-ok"></span>
<span class="isim">glyphicon glyphicon-ok</span>
<span class="glyphicon glyphicon-remove"></span>
<span class="isim">glyphicon glyphicon-remove</span>
<span class="glyphicon glyphicon-zoom-in"></span>
<span class="isim">glyphicon glyphicon-zoom-in</span>
<span class="glyphicon glyphicon-zoom-out"></span>
<span class="isim">glyphicon glyphicon-zoom-out</span>
<span class="glyphicon glyphicon-off"></span>
<span class="isim">glyphicon glyphicon-off</span>
<span class="glyphicon glyphicon-signal"></span>
<span class="isim">glyphicon glyphicon-signal</span>
<span class="glyphicon glyphicon-cog"></span>
<span class="isim">glyphicon glyphicon-cog</span>
<span class="glyphicon glyphicon-trash"></span>
<span class="isim">glyphicon glyphicon-trash</span>
<span class="glyphicon glyphicon-home"></span>
<span class="isim">glyphicon glyphicon-home</span>
<span class="glyphicon glyphicon-file"></span>
<span class="isim">glyphicon glyphicon-file</span>
<span class="glyphicon glyphicon-time"></span>
<span class="isim">glyphicon glyphicon-time</span>
<span class="glyphicon glyphicon-road"></span>
<span class="isim">glyphicon glyphicon-road</span>
<span class="glyphicon glyphicon-download-alt"></span>
<span class="isim">glyphicon glyphicon-download-alt</span>
<span class="glyphicon glyphicon-download"></span>
<span class="isim">glyphicon glyphicon-download</span>
<span class="glyphicon glyphicon-upload"></span>
<span class="isim">glyphicon glyphicon-upload</span>
<span class="glyphicon glyphicon-inbox"></span>
<span class="isim">glyphicon glyphicon-inbox</span>
<span class="glyphicon glyphicon-play-circle"></span>
<span class="isim">glyphicon glyphicon-play-circle</span>
<span class="glyphicon glyphicon-repeat"></span>
<span class="isim">glyphicon glyphicon-repeat</span>
<span class="glyphicon glyphicon-refresh"></span>
<span class="isim">glyphicon glyphicon-refresh</span>
<span class="glyphicon glyphicon-list-alt"></span>
<span class="isim">glyphicon glyphicon-list-alt</span>
<span class="glyphicon glyphicon-lock"></span>
<span class="isim">glyphicon glyphicon-lock</span>
<span class="glyphicon glyphicon-flag"></span>
<span class="isim">glyphicon glyphicon-flag</span>
<span class="glyphicon glyphicon-headphones"></span>
<span class="isim">glyphicon glyphicon-headphones</span>
<span class="glyphicon glyphicon-volume-off"></span>
<span class="isim">glyphicon glyphicon-volume-off</span>
<span class="glyphicon glyphicon-volume-down"></span>
<span class="isim">glyphicon glyphicon-volume-down</span>
<span class="glyphicon glyphicon-volume-up"></span>
<span class="isim">glyphicon glyphicon-volume-up</span>
<span class="glyphicon glyphicon-qrcode"></span>
<span class="isim">glyphicon glyphicon-qrcode</span>
<span class="glyphicon glyphicon-barcode"></span>
<span class="isim">glyphicon glyphicon-barcode</span>
<span class="glyphicon glyphicon-tag"></span>
<span class="isim">glyphicon glyphicon-tag</span>
<span class="glyphicon glyphicon-tags"></span>
<span class="isim">glyphicon glyphicon-tags</span>
<span class="glyphicon glyphicon-book"></span>
<span class="isim">glyphicon glyphicon-book</span>
<span class="glyphicon glyphicon-bookmark"></span>
<span class="isim">glyphicon glyphicon-bookmark</span>
<span class="glyphicon glyphicon-print"></span>
<span class="isim">glyphicon glyphicon-print</span>
<span class="glyphicon glyphicon-camera"></span>
<span class="isim">glyphicon glyphicon-camera</span>
<span class="glyphicon glyphicon-font"></span>
<span class="isim">glyphicon glyphicon-font</span>
<span class="glyphicon glyphicon-bold"></span>
<span class="isim">glyphicon glyphicon-bold</span>
<span class="glyphicon glyphicon-italic"></span>
<span class="isim">glyphicon glyphicon-italic</span>
<span class="glyphicon glyphicon-text-height"></span>
<span class="isim">glyphicon glyphicon-text-height</span>
<span class="glyphicon glyphicon-text-width"></span>
<span class="isim">glyphicon glyphicon-text-width</span>
<span class="glyphicon glyphicon-align-left"></span>
<span class="isim">glyphicon glyphicon-align-left</span>
<span class="glyphicon glyphicon-align-center"></span>
<span class="isim">glyphicon glyphicon-align-center</span>
<span class="glyphicon glyphicon-align-right"></span>
<span class="isim">glyphicon glyphicon-align-right</span>
<span class="glyphicon glyphicon-align-justify"></span>
<span class="isim">glyphicon glyphicon-align-justify</span>
<span class="glyphicon glyphicon-list"></span>
<span class="isim">glyphicon glyphicon-list</span>
<span class="glyphicon glyphicon-indent-left"></span>
<span class="isim">glyphicon glyphicon-indent-left</span>
<span class="glyphicon glyphicon-indent-right"></span>
<span class="isim">glyphicon glyphicon-indent-right</span>
<span class="glyphicon glyphicon-facetime-video"></span>
<span class="isim">glyphicon glyphicon-facetime-video</span>
<span class="glyphicon glyphicon-picture"></span>
<span class="isim">glyphicon glyphicon-picture</span>
<span class="glyphicon glyphicon-map-marker"></span>
<span class="isim">glyphicon glyphicon-map-marker</span>
<span class="glyphicon glyphicon-adjust"></span>
<span class="isim">glyphicon glyphicon-adjust</span>
<span class="glyphicon glyphicon-tint"></span>
<span class="isim">glyphicon glyphicon-tint</span>
<span class="glyphicon glyphicon-edit"></span>
<span class="isim">glyphicon glyphicon-edit</span>
<span class="glyphicon glyphicon-share"></span>
<span class="isim">glyphicon glyphicon-share</span>
<span class="glyphicon glyphicon-check"></span>
<span class="isim">glyphicon glyphicon-check</span>
<span class="glyphicon glyphicon-move"></span>
<span class="isim">glyphicon glyphicon-move</span>
<span class="glyphicon glyphicon-step-backward"></span>
<span class="isim">glyphicon glyphicon-step-backward</span>
<span class="glyphicon glyphicon-fast-backward"></span>
<span class="isim">glyphicon glyphicon-fast-backward</span>
<span class="glyphicon glyphicon-backward"></span>
<span class="isim">glyphicon glyphicon-backward</span>
<span class="glyphicon glyphicon-play"></span>
<span class="isim">glyphicon glyphicon-play</span>
<span class="glyphicon glyphicon-pause"></span>
<span class="isim">glyphicon glyphicon-pause</span>
<span class="glyphicon glyphicon-stop"></span>
<span class="isim">glyphicon glyphicon-stop</span>
<span class="glyphicon glyphicon-forward"></span>
<span class="isim">glyphicon glyphicon-forward</span>
<span class="glyphicon glyphicon-fast-forward"></span>
<span class="isim">glyphicon glyphicon-fast-forward</span>
<span class="glyphicon glyphicon-step-forward"></span>
<span class="isim">glyphicon glyphicon-step-forward</span>
<span class="glyphicon glyphicon-eject"></span>
<span class="isim">glyphicon glyphicon-eject</span>
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="isim">glyphicon glyphicon-chevron-left</span>
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="isim">glyphicon glyphicon-chevron-right</span>
<span class="glyphicon glyphicon-plus-sign"></span>
<span class="isim">glyphicon glyphicon-plus-sign</span>
<span class="glyphicon glyphicon-minus-sign"></span>
<span class="isim">glyphicon glyphicon-minus-sign</span>
<span class="glyphicon glyphicon-remove-sign"></span>
<span class="isim">glyphicon glyphicon-remove-sign</span>
<span class="glyphicon glyphicon-ok-sign"></span>
<span class="isim">glyphicon glyphicon-ok-sign</span>
<span class="glyphicon glyphicon-question-sign"></span>
<span class="isim">glyphicon glyphicon-question-sign</span>
<span class="glyphicon glyphicon-info-sign"></span>
<span class="isim">glyphicon glyphicon-info-sign</span>
<span class="glyphicon glyphicon-screenshot"></span>
<span class="isim">glyphicon glyphicon-screenshot</span>
<span class="glyphicon glyphicon-remove-circle"></span>
<span class="isim">glyphicon glyphicon-remove-circle</span>
<span class="glyphicon glyphicon-ok-circle"></span>
<span class="isim">glyphicon glyphicon-ok-circle</span>
<span class="glyphicon glyphicon-ban-circle"></span>
<span class="isim">glyphicon glyphicon-ban-circle</span>
<span class="glyphicon glyphicon-arrow-left"></span>
<span class="isim">glyphicon glyphicon-arrow-left</span>
<span class="glyphicon glyphicon-arrow-right"></span>
<span class="isim">glyphicon glyphicon-arrow-right</span>
<span class="glyphicon glyphicon-arrow-up"></span>
<span class="isim">glyphicon glyphicon-arrow-up</span>
<span class="glyphicon glyphicon-arrow-down"></span>
<span class="isim">glyphicon glyphicon-arrow-down</span>
<span class="glyphicon glyphicon-share-alt"></span>
<span class="isim">glyphicon glyphicon-share-alt</span>
<span class="glyphicon glyphicon-resize-full"></span>
<span class="isim">glyphicon glyphicon-resize-full</span>
<span class="glyphicon glyphicon-resize-small"></span>
<span class="isim">glyphicon glyphicon-resize-small</span>
<span class="glyphicon glyphicon-exclamation-sign"></span>
<span class="isim">glyphicon glyphicon-exclamation-sign</span>
<span class="glyphicon glyphicon-gift"></span>
<span class="isim">glyphicon glyphicon-gift</span>
<span class="glyphicon glyphicon-leaf"></span>
<span class="isim">glyphicon glyphicon-leaf</span>
<span class="glyphicon glyphicon-fire"></span>
<span class="isim">glyphicon glyphicon-fire</span>
<span class="glyphicon glyphicon-eye-open"></span>
<span class="isim">glyphicon glyphicon-eye-open</span>
<span class="glyphicon glyphicon-eye-close"></span>
<span class="isim">glyphicon glyphicon-eye-close</span>
<span class="glyphicon glyphicon-warning-sign"></span>
<span class="isim">glyphicon glyphicon-warning-sign</span>
<span class="glyphicon glyphicon-plane"></span>
<span class="isim">glyphicon glyphicon-plane</span>
<span class="glyphicon glyphicon-calendar"></span>
<span class="isim">glyphicon glyphicon-calendar</span>
<span class="glyphicon glyphicon-random"></span>
<span class="isim">glyphicon glyphicon-random</span>
<span class="glyphicon glyphicon-comment"></span>
<span class="isim">glyphicon glyphicon-comment</span>
<span class="glyphicon glyphicon-magnet"></span>
<span class="isim">glyphicon glyphicon-magnet</span>
<span class="glyphicon glyphicon-chevron-up"></span>
<span class="isim">glyphicon glyphicon-chevron-up</span>
<span class="glyphicon glyphicon-chevron-down"></span>
<span class="isim">glyphicon glyphicon-chevron-down</span>
<span class="glyphicon glyphicon-retweet"></span>
<span class="isim">glyphicon glyphicon-retweet</span>
<span class="glyphicon glyphicon-shopping-cart"></span>
<span class="isim">glyphicon glyphicon-shopping-cart</span>
<span class="glyphicon glyphicon-folder-close"></span>
<span class="isim">glyphicon glyphicon-folder-close</span>
<span class="glyphicon glyphicon-folder-open"></span>
<span class="isim">glyphicon glyphicon-folder-open</span>
<span class="glyphicon glyphicon-resize-vertical"></span>
<span class="isim">glyphicon glyphicon-resize-vertical</span>
<span class="glyphicon glyphicon-resize-horizontal"></span>
<span class="isim">glyphicon glyphicon-resize-horizontal</span>
<span class="glyphicon glyphicon-hdd"></span>
<span class="isim">glyphicon glyphicon-hdd</span>
<span class="glyphicon glyphicon-bullhorn"></span>
<span class="isim">glyphicon glyphicon-bullhorn</span>
<span class="glyphicon glyphicon-bell"></span>
<span class="isim">glyphicon glyphicon-bell</span>
<span class="glyphicon glyphicon-certificate"></span>
<span class="isim">glyphicon glyphicon-certificate</span>
<span class="glyphicon glyphicon-thumbs-up"></span>
<span class="isim">glyphicon glyphicon-thumbs-up</span>
<span class="glyphicon glyphicon-thumbs-down"></span>
<span class="isim">glyphicon glyphicon-thumbs-down</span>
<span class="glyphicon glyphicon-hand-right"></span>
<span class="isim">glyphicon glyphicon-hand-right</span>
<span class="glyphicon glyphicon-hand-left"></span>
<span class="isim">glyphicon glyphicon-hand-left</span>
<span class="glyphicon glyphicon-hand-up"></span>
<span class="isim">glyphicon glyphicon-hand-up</span>
<span class="glyphicon glyphicon-hand-down"></span>
<span class="isim">glyphicon glyphicon-hand-down</span>
<span class="glyphicon glyphicon-circle-arrow-right"></span>
<span class="isim">glyphicon glyphicon-circle-arrow-right</span>
<span class="glyphicon glyphicon-circle-arrow-left"></span>
<span class="isim">glyphicon glyphicon-circle-arrow-left</span>
<span class="glyphicon glyphicon-circle-arrow-up"></span>
<span class="isim">glyphicon glyphicon-circle-arrow-up</span>
<span class="glyphicon glyphicon-circle-arrow-down"></span>
<span class="isim">glyphicon glyphicon-circle-arrow-down</span>
<span class="glyphicon glyphicon-globe"></span>
<span class="isim">glyphicon glyphicon-globe</span>
<span class="glyphicon glyphicon-wrench"></span>
<span class="isim">glyphicon glyphicon-wrench</span>
<span class="glyphicon glyphicon-tasks"></span>
<span class="isim">glyphicon glyphicon-tasks</span>
<span class="glyphicon glyphicon-filter"></span>
<span class="isim">glyphicon glyphicon-filter</span>
<span class="glyphicon glyphicon-briefcase"></span>
<span class="isim">glyphicon glyphicon-briefcase</span>
<span class="glyphicon glyphicon-fullscreen"></span>
<span class="isim">glyphicon glyphicon-fullscreen</span>
<span class="glyphicon glyphicon-dashboard"></span>
<span class="isim">glyphicon glyphicon-dashboard</span>
<span class="glyphicon glyphicon-paperclip"></span>
<span class="isim">glyphicon glyphicon-paperclip</span>
<span class="glyphicon glyphicon-heart-empty"></span>
<span class="isim">glyphicon glyphicon-heart-empty</span>
<span class="glyphicon glyphicon-link"></span>
<span class="isim">glyphicon glyphicon-link</span>
<span class="glyphicon glyphicon-phone"></span>
<span class="isim">glyphicon glyphicon-phone</span>
<span class="glyphicon glyphicon-pushpin"></span>
<span class="isim">glyphicon glyphicon-pushpin</span>
<span class="glyphicon glyphicon-usd"></span>
<span class="isim">glyphicon glyphicon-usd</span>
<span class="glyphicon glyphicon-gbp"></span>
<span class="isim">glyphicon glyphicon-gbp</span>
<span class="glyphicon glyphicon-sort"></span>
<span class="isim">glyphicon glyphicon-sort</span>
<span class="glyphicon glyphicon-sort-by-alphabet"></span>
<span class="isim">glyphicon glyphicon-sort-by-alphabet</span>
<span class="glyphicon glyphicon-sort-by-alphabet-alt"></span>
<span class="isim">glyphicon glyphicon-sort-by-alphabet-alt</span>
<span class="glyphicon glyphicon-sort-by-order"></span>
<span class="isim">glyphicon glyphicon-sort-by-order</span>
<span class="glyphicon glyphicon-sort-by-order-alt"></span>
<span class="isim">glyphicon glyphicon-sort-by-order-alt</span>
<span class="glyphicon glyphicon-sort-by-attributes"></span>
<span class="isim">glyphicon glyphicon-sort-by-attributes</span>
<span class="glyphicon glyphicon-sort-by-attributes-alt"></span>
<span class="isim">glyphicon glyphicon-sort-by-attributes-alt</span>
<span class="glyphicon glyphicon-unchecked"></span>
<span class="isim">glyphicon glyphicon-unchecked</span>
<span class="glyphicon glyphicon-expand"></span>
<span class="isim">glyphicon glyphicon-expand</span>
<span class="glyphicon glyphicon-collapse-down"></span>
<span class="isim">glyphicon glyphicon-collapse-down</span>
<span class="glyphicon glyphicon-collapse-up"></span>
<span class="isim">glyphicon glyphicon-collapse-up</span>
<span class="glyphicon glyphicon-log-in"></span>
<span class="isim">glyphicon glyphicon-log-in</span>
<span class="glyphicon glyphicon-flash"></span>
<span class="isim">glyphicon glyphicon-flash</span>
<span class="glyphicon glyphicon-log-out"></span>
<span class="isim">glyphicon glyphicon-log-out</span>
<span class="glyphicon glyphicon-new-window"></span>
<span class="isim">glyphicon glyphicon-new-window</span>
<span class="glyphicon glyphicon-record"></span>
<span class="isim">glyphicon glyphicon-record</span>
<span class="glyphicon glyphicon-save"></span>
<span class="isim">glyphicon glyphicon-save</span>
<span class="glyphicon glyphicon-open"></span>
<span class="isim">glyphicon glyphicon-open</span>
<span class="glyphicon glyphicon-saved"></span>
<span class="isim">glyphicon glyphicon-saved</span>
<span class="glyphicon glyphicon-import"></span>
<span class="isim">glyphicon glyphicon-import</span>
<span class="glyphicon glyphicon-export"></span>
<span class="isim">glyphicon glyphicon-export</span>
<span class="glyphicon glyphicon-send"></span>
<span class="isim">glyphicon glyphicon-send</span>
<span class="glyphicon glyphicon-floppy-disk"></span>
<span class="isim">glyphicon glyphicon-floppy-disk</span>
<span class="glyphicon glyphicon-floppy-saved"></span>
<span class="isim">glyphicon glyphicon-floppy-saved</span>
<span class="glyphicon glyphicon-floppy-remove"></span>
<span class="isim">glyphicon glyphicon-floppy-remove</span>
<span class="glyphicon glyphicon-floppy-save"></span>
<span class="isim">glyphicon glyphicon-floppy-save</span>
<span class="glyphicon glyphicon-floppy-open"></span>
<span class="isim">glyphicon glyphicon-floppy-open</span>
<span class="glyphicon glyphicon-credit-card"></span>
<span class="isim">glyphicon glyphicon-credit-card</span>
<span class="glyphicon glyphicon-transfer"></span>
<span class="isim">glyphicon glyphicon-transfer</span>
<span class="glyphicon glyphicon-cutlery"></span>
<span class="isim">glyphicon glyphicon-cutlery</span>
<span class="glyphicon glyphicon-header"></span>
<span class="isim">glyphicon glyphicon-header</span>
<span class="glyphicon glyphicon-compressed"></span>
<span class="isim">glyphicon glyphicon-compressed</span>
<span class="glyphicon glyphicon-earphone"></span>
<span class="isim">glyphicon glyphicon-earphone</span>
<span class="glyphicon glyphicon-phone-alt"></span>
<span class="isim">glyphicon glyphicon-phone-alt</span>
<span class="glyphicon glyphicon-tower"></span>
<span class="isim">glyphicon glyphicon-tower</span>
<span class="glyphicon glyphicon-stats"></span>
<span class="isim">glyphicon glyphicon-stats</span>
<span class="glyphicon glyphicon-sd-video"></span>
<span class="isim">glyphicon glyphicon-sd-video</span>
<span class="glyphicon glyphicon-hd-video"></span>
<span class="isim">glyphicon glyphicon-hd-video</span>
<span class="glyphicon glyphicon-subtitles"></span>
<span class="isim">glyphicon glyphicon-subtitles</span>
<span class="glyphicon glyphicon-sound-stereo"></span>
<span class="isim">glyphicon glyphicon-sound-stereo</span>
<span class="glyphicon glyphicon-sound-dolby"></span>
<span class="isim">glyphicon glyphicon-sound-dolby</span>
<span class="glyphicon glyphicon-sound-5-1"></span>
<span class="isim">glyphicon glyphicon-sound-5-1</span>
<span class="glyphicon glyphicon-sound-6-1"></span>
<span class="isim">glyphicon glyphicon-sound-6-1</span>
<span class="glyphicon glyphicon-sound-7-1"></span>
<span class="isim">glyphicon glyphicon-sound-7-1</span>
<span class="glyphicon glyphicon-copyright-mark"></span>
<span class="isim">glyphicon glyphicon-copyright-mark</span>
<span class="glyphicon glyphicon-registration-mark"></span>
<span class="isim">glyphicon glyphicon-registration-mark</span>
<span class="glyphicon glyphicon-cloud-download"></span>
<span class="isim">glyphicon glyphicon-cloud-download</span>
<span class="glyphicon glyphicon-cloud-upload"></span>
<span class="isim">glyphicon glyphicon-cloud-upload</span>
<span class="glyphicon glyphicon-tree-conifer"></span>
<span class="isim">glyphicon glyphicon-tree-conifer</span>
<span class="glyphicon glyphicon-tree-deciduous"></span>
<span class="isim">glyphicon glyphicon-tree-deciduous</span>
</div>
</body>
</html>
Görüntüsü :
Tüm ikonların sağın da class isimleri yazıyor.İstediğiniz ikonun class ismini alarak bir spa'nın classına yapıştırmamız yeterli.