アイコン
概要
アイコンの表示
アイコン
指定のclassよりアイコンを表示する
ソース（デモ）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>アイコン</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="row" style="margin: 10px;">
<div class="span12">
<h1>アイコン</h1>
</div>
</div>
<div class="row" style="margin: 10px;">
<div class="span12">
<h2>アイコンリスト</h2>
</div>
</div>
<div class="row" style="margin: 10px;">
<div class="span12">
<form>
<table class="table">
<tr>
<th>No</th>
<th>class=""</th>
<th colspan="2">確認</th>
</tr>
<tr>
<td>1</td>
<td>icon-glass</td>
<td>
<a href="#" class="btn"><i class="icon-glass"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-glass icon-white"></i></a>
</td>
</tr>
</tr>
<tr>
<td>2</td>
<td>icon-music</td>
<td>
<a href="#" class="btn"><i class="icon-music"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-music icon-white"></i></a>
</td>
</tr>
<tr>
<td>3</td>
<td>icon-search</td>
<td>
<a href="#" class="btn"><i class="icon-search"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-search icon-white"></i></a>
</td>
</tr>
<tr>
<td>4</td>
<td>icon-envelope</td>
<td>
<a href="#" class="btn"><i class="icon-envelope"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-envelope icon-white"></i></a>
</td>
</tr>
<tr>
<td>5</td>
<td>icon-heart</td>
<td>
<a href="#" class="btn"><i class="icon-heart"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-heart icon-white"></i></a>
</td>
</tr>
<tr>
<td>6</td>
<td>icon-star</td>
<td>
<a href="#" class="btn"><i class="icon-star"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-star icon-white"></i></a>
</td>
</tr>
<tr>
<td>7</td>
<td>icon-star-empty</td>
<td>
<a href="#" class="btn"><i class="icon-star-empty"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-star-empty icon-white"></i></a>
</td>
</tr>
<tr>
<td>8</td>
<td>icon-user</td>
<td>
<a href="#" class="btn"><i class="icon-user"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-user icon-white"></i></a>
</td>
</tr>
<tr>
<td>9</td>
<td>icon-film</td>
<td>
<a href="#" class="btn"><i class="icon-film"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-film icon-white"></i></a>
</td>
</tr>
<tr>
<td>10</td>
<td>icon-th-large</td>
<td>
<a href="#" class="btn"><i class="icon-th-large"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-th-large icon-white"></i></a>
</td>
</tr>
<tr>
<td>11</td>
<td>icon-th</td>
<td>
<a href="#" class="btn"><i class="icon-th"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-th icon-white"></i></a>
</td>
</tr>
<tr>
<td>12</td>
<td>icon-th-list</td>
<td>
<a href="#" class="btn"><i class="icon-th-list"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-th-list icon-white"></i></a>
</td>
</tr>
<tr>
<td>13</td>
<td>icon-ok</td>
<td>
<a href="#" class="btn"><i class="icon-ok"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-ok icon-white"></i></a>
</td>
</tr>
<tr>
<td>14</td>
<td>icon-remove</td>
<td>
<a href="#" class="btn"><i class="icon-remove"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-remove icon-white"></i></a>
</td>
</tr>
<tr>
<td>15</td>
<td>icon-zoom-in</td>
<td>
<a href="#" class="btn"><i class="icon-zoom-in"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-zoom-in icon-white"></i></a>
</td>
</tr>
<tr>
<td>16</td>
<td>icon-zoom-out</td>
<td>
<a href="#" class="btn"><i class="icon-zoom-out"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-zoom-out icon-white"></i></a>
</td>
</tr>
<tr>
<td>17</td>
<td>icon-off</td>
<td>
<a href="#" class="btn"><i class="icon-off"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-off icon-white"></i></a>
</td>
</tr>
<tr>
<td>18</td>
<td>icon-signal</td>
<td>
<a href="#" class="btn"><i class="icon-signal"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-signal icon-white"></i></a>
</td>
</tr>
<tr>
<td>19</td>
<td>icon-cog</td>
<td>
<a href="#" class="btn"><i class="icon-cog"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-cog icon-white"></i></a>
</td>
</tr>
<tr>
<td>20</td>
<td>icon-trash</td>
<td>
<a href="#" class="btn"><i class="icon-trash"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-trash icon-white"></i></a>
</td>
</tr>
<tr>
<td>21</td>
<td>icon-home</td>
<td>
<a href="#" class="btn"><i class="icon-home"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-home icon-white"></i></a>
</td>
</tr>
<tr>
<td>22</td>
<td>icon-file</td>
<td>
<a href="#" class="btn"><i class="icon-file"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-file icon-white"></i></a>
</td>
</tr>
<tr>
<td>23</td>
<td>icon-time</td>
<td>
<a href="#" class="btn"><i class="icon-time"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-time icon-white"></i></a>
</td>
</tr>
<tr>
<td>24</td>
<td>icon-road</td>
<td>
<a href="#" class="btn"><i class="icon-road"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-road icon-white"></i></a>
</td>
</tr>
<tr>
<td>25</td>
<td>icon-download-alt</td>
<td>
<a href="#" class="btn"><i class="icon-download-alt"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-download-alt icon-white"></i></a>
</td>
</tr>
<tr>
<td>26</td>
<td>icon-download</td>
<td>
<a href="#" class="btn"><i class="icon-download"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-download icon-white"></i></a>
</td>
</tr>
<tr>
<td>27</td>
<td>icon-upload</td>
<td>
<a href="#" class="btn"><i class="icon-upload"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-upload icon-white"></i></a>
</td>
</tr>
<tr>
<td>28</td>
<td>icon-inbox</td>
<td>
<a href="#" class="btn"><i class="icon-inbox"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-inbox icon-white"></i></a>
</td>
</tr>
<tr>
<td>29</td>
<td>icon-play-circle</td>
<td>
<a href="#" class="btn"><i class="icon-play-circle"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-play-circle icon-white"></i></a>
</td>
</tr>
<tr>
<td>30</td>
<td>icon-repeat</td>
<td>
<a href="#" class="btn"><i class="icon-repeat"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-repeat icon-white"></i></a>
</td>
</tr>
<tr>
<td>31</td>
<td>icon-refresh</td>
<td>
<a href="#" class="btn"><i class="icon-refresh"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-refresh icon-white"></i></a>
</td>
</tr>
<tr>
<td>32</td>
<td>icon-list-alt</td>
<td>
<a href="#" class="btn"><i class="icon-list-alt"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-list-alt icon-white"></i></a>
</td>
</tr>
<tr>
<td>33</td>
<td>icon-lock</td>
<td>
<a href="#" class="btn"><i class="icon-lock"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-lock icon-white"></i></a>
</td>
</tr>
<tr>
<td>34</td>
<td>icon-flag</td>
<td>
<a href="#" class="btn"><i class="icon-flag"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-flag icon-white"></i></a>
</td>
</tr>
<tr>
<td>35</td>
<td>icon-headphones</td>
<td>
<a href="#" class="btn"><i class="icon-headphones"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-headphones icon-white"></i></a>
</td>
</tr>
<tr>
<td>36</td>
<td>icon-volume-off</td>
<td>
<a href="#" class="btn"><i class="icon-volume-off"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-volume-off icon-white"></i></a>
</td>
</tr>
<tr>
<td>37</td>
<td>icon-volume-down</td>
<td>
<a href="#" class="btn"><i class="icon-volume-down"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-volume-down icon-white"></i></a>
</td>
</tr>
<tr>
<td>38</td>
<td>icon-volume-up</td>
<td>
<a href="#" class="btn"><i class="icon-volume-up"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-volume-up icon-white"></i></a>
</td>
</tr>
<tr>
<td>39</td>
<td>icon-qrcode</td>
<td>
<a href="#" class="btn"><i class="icon-qrcode"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-qrcode icon-white"></i></a>
</td>
</tr>
<tr>
<td>40</td>
<td>icon-barcode</td>
<td>
<a href="#" class="btn"><i class="icon-barcode"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-barcode icon-white"></i></a>
</td>
</tr>
<tr>
<td>41</td>
<td>icon-tag</td>
<td>
<a href="#" class="btn"><i class="icon-tag"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-tag icon-white"></i></a>
</td>
</tr>
<tr>
<td>42</td>
<td>icon-tags</td>
<td>
<a href="#" class="btn"><i class="icon-tags"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-tags icon-white"></i></a>
</td>
</tr>
<tr>
<td>43</td>
<td>icon-book</td>
<td>
<a href="#" class="btn"><i class="icon-book"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-book icon-white"></i></a>
</td>
</tr>
<tr>
<td>44</td>
<td>icon-bookmark</td>
<td>
<a href="#" class="btn"><i class="icon-bookmark"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-bookmark icon-white"></i></a>
</td>
</tr>
<tr>
<td>45</td>
<td>icon-print</td>
<td>
<a href="#" class="btn"><i class="icon-print"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-print icon-white"></i></a>
</td>
</tr>
<tr>
<td>46</td>
<td>icon-camera</td>
<td>
<a href="#" class="btn"><i class="icon-camera"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-camera icon-white"></i></a>
</td>
</tr>
<tr>
<td>47</td>
<td>icon-font</td>
<td>
<a href="#" class="btn"><i class="icon-font"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-font icon-white"></i></a>
</td>
</tr>
<tr>
<td>48</td>
<td>icon-bold</td>
<td>
<a href="#" class="btn"><i class="icon-bold"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-bold icon-white"></i></a>
</td>
</tr>
<tr>
<td>49</td>
<td>icon-italic</td>
<td>
<a href="#" class="btn"><i class="icon-italic"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-italic icon-white"></i></a>
</td>
</tr>
<tr>
<td>50</td>
<td>icon-text-height</td>
<td>
<a href="#" class="btn"><i class="icon-text-height"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-text-height icon-white"></i></a>
</td>
</tr>
<tr>
<td>51</td>
<td>icon-text-width</td>
<td>
<a href="#" class="btn"><i class="icon-text-width"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-text-width icon-white"></i></a>
</td>
</tr>
<tr>
<td>52</td>
<td>icon-align-left</td>
<td>
<a href="#" class="btn"><i class="icon-align-left"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-align-left icon-white"></i></a>
</td>
</tr>
<tr>
<td>53</td>
<td>icon-align-center</td>
<td>
<a href="#" class="btn"><i class="icon-align-center"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-align-center icon-white"></i></a>
</td>
</tr>
<tr>
<td>54</td>
<td>icon-align-right</td>
<td>
<a href="#" class="btn"><i class="icon-align-right"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-align-right icon-white"></i></a>
</td>
</tr>
<tr>
<td>55</td>
<td>icon-align-justify</td>
<td>
<a href="#" class="btn"><i class="icon-align-justify"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-align-justify icon-white"></i></a>
</td>
</tr>
<tr>
<td>56</td>
<td>icon-list</td>
<td>
<a href="#" class="btn"><i class="icon-list"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-list icon-white"></i></a>
</td>
</tr>
<tr>
<td>57</td>
<td>icon-indent-left</td>
<td>
<a href="#" class="btn"><i class="icon-indent-right"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-indent-right icon-white"></i></a>
</td>
</tr>
<tr>
<td>58</td>
<td>icon-indent-right</td>
<td>
<a href="#" class="btn"><i class="icon-indent-right"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-indent-right icon-white"></i></a>
</td>
</tr>
<tr>
<td>59</td>
<td>icon-facetime-video</td>
<td>
<a href="#" class="btn"><i class="icon-facetime-video"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-facetime-video icon-white"></i></a>
</td>
</tr>
<tr>
<td>60</td>
<td>icon-picture</td>
<td>
<a href="#" class="btn"><i class="icon-picture"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-picture icon-white"></i></a>
</td>
</tr>
<tr>
<td>61</td>
<td>icon-pencil</td>
<td>
<a href="#" class="btn"><i class="icon-pencil"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-pencil icon-white"></i></a>
</td>
</tr>
<tr>
<td>62</td>
<td>icon-map-marker</td>
<td>
<a href="#" class="btn"><i class="icon-map-marker"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-map-marker icon-white"></i></a>
</td>
</tr>
<tr>
<td>63</td>
<td>icon-adjust</td>
<td>
<a href="#" class="btn"><i class="icon-adjust"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-adjust icon-white"></i></a>
</td>
</tr>
<tr>
<td>64</td>
<td>icon-tint</td>
<td>
<a href="#" class="btn"><i class="icon-tint"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-tint icon-white"></i></a>
</td>
</tr>
<tr>
<td>65</td>
<td>icon-edit</td>
<td>
<a href="#" class="btn"><i class="icon-edit"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-edit icon-white"></i></a>
</td>
</tr>
<tr>
<td>66</td>
<td>icon-share</td>
<td>
<a href="#" class="btn"><i class="icon-share"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-share icon-white"></i></a>
</td>
</tr>
<tr>
<td>67</td>
<td>icon-check</td>
<td>
<a href="#" class="btn"><i class="icon-check"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-check icon-white"></i></a>
</td>
</tr>
<tr>
<td>68</td>
<td>icon-move</td>
<td>
<a href="#" class="btn"><i class="icon-move"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-move icon-white"></i></a>
</td>
</tr>
<tr>
<td>69</td>
<td>icon-step-backward</td>
<td>
<a href="#" class="btn"><i class="icon-step-backward"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-step-backward icon-white"></i></a>
</td>
</tr>
<tr>
<td>70</td>
<td>icon-fast-backward</td>
<td>
<a href="#" class="btn"><i class="icon-fast-backward"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-fast-backward icon-white"></i></a>
</td>
</tr>
<tr>
<td>71</td>
<td>icon-backward</td>
<td>
<a href="#" class="btn"><i class="icon-backward"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-backward icon-white"></i></a>
</td>
</tr>
<tr>
<td>72</td>
<td>icon-play</td>
<td>
<a href="#" class="btn"><i class="icon-play"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-play icon-white"></i></a>
</td>
</tr>
<tr>
<td>73</td>
<td>icon-pause</td>
<td>
<a href="#" class="btn"><i class="icon-pause"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-pause icon-white"></i></a>
</td>
</tr>
<tr>
<td>74</td>
<td>icon-stop</td>
<td>
<a href="#" class="btn"><i class="icon-stop"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-stop icon-white"></i></a>
</td>
</tr>
<tr>
<td>75</td>
<td>icon-forward</td>
<td>
<a href="#" class="btn"><i class="icon-forward"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-forward icon-white"></i></a>
</td>
</tr>
<tr>
<td>76</td>
<td>icon-fast-forward</td>
<td>
<a href="#" class="btn"><i class="icon-fast-forward"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-fast-forward icon-white"></i></a>
</td>
</tr>
<tr>
<td>77</td>
<td>icon-step-forward</td>
<td>
<a href="#" class="btn"><i class="icon-step-forward"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-step-forward icon-white"></i></a>
</td>
</tr>
<tr>
<td>78</td>
<td>icon-eject</td>
<td>
<a href="#" class="btn"><i class="icon-eject"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-eject icon-white"></i></a>
</td>
</tr>
<tr>
<td>79</td>
<td>icon-chevron-left</td>
<td>
<a href="#" class="btn"><i class="icon-chevron-left"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-chevron-left icon-white"></i></a>
</td>
</tr>
<tr>
<td>80</td>
<td>icon-chevron-right</td>
<td>
<a href="#" class="btn"><i class="icon-chevron-right"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-chevron-right icon-white"></i></a>
</td>
</tr>
<tr>
<td>81</td>
<td>icon-plus-sign</td>
<td>
<a href="#" class="btn"><i class="icon-plus-sign"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-plus-sign icon-white"></i></a>
</td>
</tr>
<tr>
<td>82</td>
<td>icon-minus-sign</td>
<td>
<a href="#" class="btn"><i class="icon-minus-sign"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-minus-sign icon-white"></i></a>
</td>
</tr>
<tr>
<td>83</td>
<td>icon-remove-sign</td>
<td>
<a href="#" class="btn"><i class="icon-ok-sign"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-ok-sign icon-white"></i></a>
</td>
</tr>
<tr>
<td>84</td>
<td>icon-ok-sign</td>
<td>
<a href="#" class="btn"><i class="icon-ok-sign"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-ok-sign icon-white"></i></a>
</td>
</tr>
<tr>
<td>85</td>
<td>icon-question-sign</td>
<td>
<a href="#" class="btn"><i class="icon-question-sign"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-question-sign icon-white"></i></a>
</td>
</tr>
<tr>
<td>86</td>
<td>icon-info-sign</td>
<td>
<a href="#" class="btn"><i class="icon-info-sign"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-info-sign icon-white"></i></a>
</td>
</tr>
<tr>
<td>87</td>
<td>icon-screenshot</td>
<td>
<a href="#" class="btn"><i class="icon-screenshot"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-screenshot icon-white"></i></a>
</td>
</tr>
<tr>
<td>88</td>
<td>icon-remove-circle</td>
<td>
<a href="#" class="btn"><i class="icon-remove-circle"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-remove-circle icon-white"></i></a>
</td>
</tr>
<tr>
<td>89</td>
<td>icon-ok-circle</td>
<td>
<a href="#" class="btn"><i class="icon-ok-circle"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-ok-circle icon-white"></i></a>
</td>
</tr>
<tr>
<td>90</td>
<td>icon-ban-circle</td>
<td>
<a href="#" class="btn"><i class="icon-ban-circle"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-ban-circle icon-white"></i></a>
</td>
</tr>
<tr>
<td>91</td>
<td>icon-arrow-left</td>
<td>
<a href="#" class="btn"><i class="icon-arrow-left"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-arrow-left icon-white"></i></a>
</td>
</tr>
<tr>
<td>92</td>
<td>icon-arrow-right</td>
<td>
<a href="#" class="btn"><i class="icon-arrow-right"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-arrow-right icon-white"></i></a>
</td>
</tr>
<tr>
<td>93</td>
<td>icon-arrow-up</td>
<td>
<a href="#" class="btn"><i class="icon-arrow-up"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-arrow-up icon-white"></i></a>
</td>
</tr>
<tr>
<td>94</td>
<td>icon-arrow-down</td>
<td>
<a href="#" class="btn"><i class="icon-arrow-down"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-arrow-down icon-white"></i></a>
</td>
</tr>
<tr>
<td>95</td>
<td>icon-share-alt</td>
<td>
<a href="#" class="btn"><i class="icon-share-alt"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-share-alt icon-white"></i></a>
</td>
</tr>
<tr>
<td>96</td>
<td>icon-resize-full</td>
<td>
<a href="#" class="btn"><i class="icon-resize-full"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-resize-full icon-white"></i></a>
</td>
</tr>
<tr>
<td>97</td>
<td>icon-resize-small</td>
<td>
<a href="#" class="btn"><i class="icon-resize-small"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-resize-small icon-white"></i></a>
</td>
</tr>
<tr>
<td>98</td>
<td>icon-plus</td>
<td>
<a href="#" class="btn"><i class="icon-plus"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-plus icon-white"></i></a>
</td>
</tr>
<tr>
<td>99</td>
<td>icon-minus</td>
<td>
<a href="#" class="btn"><i class="icon-minus"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-minus icon-white"></i></a>
</td>
</tr>
<tr>
<td>100</td>
<td>icon-asterisk</td>
<td>
<a href="#" class="btn"><i class="icon-asterisk"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-asterisk icon-white"></i></a>
</td>
</tr>
<tr>
<td>101</td>
<td>icon-exclamation-sign</td>
<td>
<a href="#" class="btn"><i class="icon-exclamation-sign"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-exclamation-sign icon-white"></i></a>
</td>
</tr>
<tr>
<td>102</td>
<td>icon-gift</td>
<td>
<a href="#" class="btn"><i class="icon-gift"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-gift icon-white"></i></a>
</td>
</tr>
<tr>
<td>103</td>
<td>icon-leaf</td>
<td>
<a href="#" class="btn"><i class="icon-leaf"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-leaf icon-white"></i></a>
</td>
</tr>
<tr>
<td>104</td>
<td>icon-fire</td>
<td>
<a href="#" class="btn"><i class="icon-fire"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-fire icon-white"></i></a>
</td>
</tr>
<tr>
<td>105</td>
<td>icon-eye-open</td>
<td>
<a href="#" class="btn"><i class="icon-eye-open"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-eye-open icon-white"></i></a>
</td>
</tr>
<tr>
<td>106</td>
<td>icon-eye-close</td>
<td>
<a href="#" class="btn"><i class="icon-eye-close"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-eye-close icon-white"></i></a>
</td>
</tr>
<tr>
<td>107</td>
<td>icon-warning-sign</td>
<td>
<a href="#" class="btn"><i class="icon-warning-sign"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-warning-sign icon-white"></i></a>
</td>
</tr>
<tr>
<td>108</td>
<td>icon-plane</td>
<td>
<a href="#" class="btn"><i class="icon-plane"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-plane icon-white"></i></a>
</td>
</tr>
<tr>
<td>109</td>
<td>icon-calendar</td>
<td>
<a href="#" class="btn"><i class="icon-calendar"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-calendar icon-white"></i></a>
</td>
</tr>
<tr>
<td>110</td>
<td>icon-random</td>
<td>
<a href="#" class="btn"><i class="icon-random"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-random icon-white"></i></a>
</td>
</tr>
<tr>
<td>111</td>
<td>icon-comment</td>
<td>
<a href="#" class="btn"><i class="icon-comment"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-comment icon-white"></i></a>
</td>
</tr>
<tr>
<td>112</td>
<td>icon-magnet</td>
<td>
<a href="#" class="btn"><i class="icon-magnet"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-magnet icon-white"></i></a>
</td>
</tr>
<tr>
<td>113</td>
<td>icon-chevron-up</td>
<td>
<a href="#" class="btn"><i class="icon-chevron-up"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-chevron-up icon-white"></i></a>
</td>
</tr>
<tr>
<td>114</td>
<td>icon-chevron-down</td>
<td>
<a href="#" class="btn"><i class="icon-chevron-down"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-chevron-down icon-white"></i></a>
</td>
</tr>
<tr>
<td>115</td>
<td>icon-retweet</td>
<td>
<a href="#" class="btn"><i class="icon-retweet"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-retweet icon-white"></i></a>
</td>
</tr>
<tr>
<td>116</td>
<td>icon-shopping-cart</td>
<td>
<a href="#" class="btn"><i class="icon-shopping-cart"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-shopping-cart icon-white"></i></a>
</td>
</tr>
<tr>
<td>117</td>
<td>icon-folder-close</td>
<td>
<a href="#" class="btn"><i class="icon-folder-close"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-folder-close icon-white"></i></a>
</td>
</tr>
<tr>
<td>118</td>
<td>icon-folder-open</td>
<td>
<a href="#" class="btn"><i class="icon-folder-open"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-folder-open icon-white"></i></a>
</td>
</tr>
<tr>
<td>119</td>
<td>icon-resize-vertical</td>
<td>
<a href="#" class="btn"><i class="icon-resize-vertical"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-resize-vertical icon-white"></i></a>
</td>
</tr>
<tr>
<td>120</td>
<td>icon-resize-horizontal</td>
<td>
<a href="#" class="btn"><i class="icon-resize-horizontal"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-resize-horizontal icon-white"></i></a>
</td>
</tr>
<tr>
<td>121</td>
<td>icon-hdd</td>
<td>
<a href="#" class="btn"><i class="icon-hdd"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-hdd icon-white"></i></a>
</td>
</tr>
<tr>
<td>122</td>
<td>icon-bullhorn</td>
<td>
<a href="#" class="btn"><i class="icon-bullhorn"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-bullhorn icon-white"></i></a>
</td>
</tr>
<tr>
<td>123</td>
<td>icon-bell</td>
<td>
<a href="#" class="btn"><i class="icon-bell"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-bell icon-white"></i></a>
</td>
</tr>
<tr>
<td>124</td>
<td>icon-certificate</td>
<td>
<a href="#" class="btn"><i class="icon-certificate"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-certificate icon-white"></i></a>
</td>
</tr>
<tr>
<td>125</td>
<td>icon-thumbs-up</td>
<td>
<a href="#" class="btn"><i class="icon-thumbs-up"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-thumbs-up icon-white"></i></a>
</td>
</tr>
<tr>
<td>126</td>
<td>icon-thumbs-down</td>
<td>
<a href="#" class="btn"><i class="icon-thumbs-down"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-thumbs-down icon-white"></i></a>
</td>
</tr>
<tr>
<td>127</td>
<td>icon-hand-right</td>
<td>
<a href="#" class="btn"><i class="icon-hand-right"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-hand-right icon-white"></i></a>
</td>
</tr>
<tr>
<td>128</td>
<td>icon-hand-left</td>
<td>
<a href="#" class="btn"><i class="icon-hand-left"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-hand-left icon-white"></i></a>
</td>
</tr>
<tr>
<td>129</td>
<td>icon-hand-up</td>
<td>
<a href="#" class="btn"><i class="icon-hand-up"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-hand-up icon-white"></i></a>
</td>
</tr>
<tr>
<td>130</td>
<td>icon-hand-down</td>
<td>
<a href="#" class="btn"><i class="icon-hand-down"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-hand-down icon-white"></i></a>
</td>
</tr>
<tr>
<td>131</td>
<td>icon-circle-arrow-right</td>
<td>
<a href="#" class="btn"><i class="icon-circle-arrow-right"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-circle-arrow-right icon-white"></i></a>
</td>
</tr>
<tr>
<td>132</td>
<td>icon-circle-arrow-left</td>
<td>
<a href="#" class="btn"><i class="icon-circle-arrow-left"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-circle-arrow-left icon-white"></i></a>
</td>
</tr>
<tr>
<td>133</td>
<td>icon-circle-arrow-up</td>
<td>
<a href="#" class="btn"><i class="icon-circle-arrow-up"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-circle-arrow-up icon-white"></i></a>
</td>
</tr>
<tr>
<td>134</td>
<td>icon-circle-arrow-down</td>
<td>
<a href="#" class="btn"><i class="icon-circle-arrow-down"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-circle-arrow-down icon-white"></i></a>
</td>
</tr>
<tr>
<td>135</td>
<td>icon-globe</td>
<td>
<a href="#" class="btn"><i class="icon-globe"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-globe icon-white"></i></a>
</td>
</tr>
<tr>
<td>136</td>
<td>icon-wrench</td>
<td>
<a href="#" class="btn"><i class="icon-wrench"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-wrench icon-white"></i></a>
</td>
</tr>
<tr>
<td>137</td>
<td>icon-tasks</td>
<td>
<a href="#" class="btn"><i class="icon-tasks"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-tasks icon-white"></i></a>
</td>
</tr>
<tr>
<td>138</td>
<td>icon-filter</td>
<td>
<a href="#" class="btn"><i class="icon-filter"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-filter icon-white"></i></a>
</td>
</tr>
<tr>
<td>139</td>
<td>icon-briefcase</td>
<td>
<a href="#" class="btn"><i class="icon-briefcase"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-briefcase icon-white"></i></a>
</td>
</tr>
<tr>
<td>140</td>
<td>icon-fullscreen</td>
<td>
<a href="#" class="btn"><i class="icon-fullscreen"></i></a>
</td>
<td>
<a href="#" class="btn btn-inverse"><i class="icon-fullscreen icon-white"></i></a>
</td>
</tr>
</table>
</form>
<h4><i class="icon-search"></i>で定義することでアイコンを使用する</h4>
</div>
</div>
<hr />
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
最終更新：2013年06月07日 21:46
