Skip to content
GitLab
Commit a2a10ae4 authored by Burak Tuyan's avatar Burak Tuyan
Browse files

Adding new examples to the icons' docs. 

- Button with dropdown menu.
- Small info button.
- Text alignment for navigation with no icon.
- Text input form with prepended icon
- Select input form with prepended icon
parent 91e9f6fa
Hide whitespace changes
Inline Side-by-side
Showing
with 112 additions and 34 deletions
+112 -34
docs/base-css.html
+ 56
- 17
View file @ a2a10ae4
......@@ -1482,51 +1482,90 @@
<p>Icons are great, but where would one use them? Here are a few ideas:</p>
<ul>
<li>As visuals for your sidebar navigation</li>
<li>For a purely icon-driven nav</li>
<li>For a purely icon-driven navigation</li>
<li>For buttons to help convey the meaning of an action</li>
<li>With links to share context on a user's destination</li>
</ul>
<p>Essentially, anywhere you can put an <code>&lt;i&gt;</code> tag, you can put an icon.</p>
<p>Essentially, anywhere you can put an <code>&lt;i&gt;</code> tag, you can put an icon. And if you need to position the text with no icon before it (where other items have an icon; see the navigation example below) simply use <code>.icon</code> class with no other classes:</p>
<pre class="prettyprint linenums">
&lt;i class="icon"&gt;&lt;/i&gt;
</pre>
</div>
</div>
<h3>Examples</h3>
<div class="row">
<div class="span6">
<p>Use them in buttons, or in button groups for a toolbar style presentation.</p>
<p>
<a class="btn" href="#"><i class="icon refresh"></i> Refresh</a>
<a class="btn success" href="#"><i class="icon white shopping-cart"></i> Checkout</a>
<a class="btn danger" href="#"><i class="icon white trash"></i> Delete</a>
</p>
<div class="span4">
<p>Use them in buttons - of all types and sizes.</p>
<div class="btn-toolbar">
<div class="btn-group">
<a class="btn" href="#"><i class="icon font"></i></a>
<a class="btn" href="#"><i class="icon bold"></i></a>
<a class="btn" href="#"><i class="icon italic"></i></a>
</div>
<div class="btn-group">
<a class="btn" href="#"><i class="icon align-left"></i></a>
<a class="btn" href="#"><i class="icon align-center"></i></a>
<a class="btn" href="#"><i class="icon align-right"></i></a>
<a class="btn" href="#"><i class="icon align-justify"></i></a>
</div>
<div class="btn-group">
<a class="btn primary" href="#"><i class="icon white user"></i> User</a>
<a class="btn primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#"><i class="icon pencil"></i> Edit</a></li>
<li><a href="#"><i class="icon trash"></i> Delete</a></li>
<li><a href="#"><i class="icon ban-circle"></i> Ban</a></li>
<li class="divider"></li>
<li><a href="#"><i class="icon"></i> Make Admin</a></li>
</ul>
</div>
</div>
<p>
<a class="btn large" href="#"><i class="icon refresh"></i> Refresh</a>
<a class="btn" href="#"><i class="icon refresh"></i> Refresh</a>
<a class="btn success" href="#"><i class="icon white shopping-cart"></i> Checkout</a>
<a class="btn danger" href="#"><i class="icon white trash"></i> Delete</a>
</p>
<p>
<a class="btn large" href="#"><i class="icon comment"></i> Comment</a>
<a class="btn small" href="#"><i class="icon cog"></i> Settings</a>
<a class="btn small info" href="#"><i class="icon white info-sign"></i> More Info</a>
</p>
</div>
<div class="span3">
<p>Or, use them in navigation.</p>
<div class="span4">
<p>Use them in navigation.</p>
<div class="well" style="padding: 8px 0;">
<ul class="nav list">
<li class="active"><a href="#"><i class="icon white home"></i> Home</a></li>
<li><a href="#"><i class="icon book"></i> Library</a></li>
<li><a href="#"><i class="icon pencil"></i> Applications</a></li>
<li><a href="#"><i class="icon"></i> Misc</a></li>
</ul>
</div> <!-- /well -->
</div>
<div class="span4">
<form>
<p>Use them with prepended forms.</p>
<div class="control-group">
<label class="control-label" for="prependedInput">Your Email Address:</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon envelope"></i></span>
<input class="span32" id="iconInput" size="16" type="text">
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="prependedInput">Your Location:</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon map-marker"></i></span>
<select id="select01">
<option>Istanbul</option>
<option>London</option>
<option>New York</option>
<option>Tokyo</option>
</select>
</div>
</div>
</div>
</form>
</div>
</div>
</section>
......
docs/templates/pages/base-css.mustache
+ 56
- 17
View file @ a2a10ae4
......@@ -1417,50 +1417,89 @@
<p>{{_i}}Icons are great, but where would one use them? Here are a few ideas:{{/i}}</p>
<ul>
<li>{{_i}}As visuals for your sidebar navigation{{/i}}</li>
<li>{{_i}}For a purely icon-driven nav{{/i}}</li>
<li>{{_i}}For a purely icon-driven navigation{{/i}}</li>
<li>{{_i}}For buttons to help convey the meaning of an action{{/i}}</li>
<li>{{_i}}With links to share context on a user's destination{{/i}}</li>
</ul>
<p>{{_i}}Essentially, anywhere you can put an <code>&lt;i&gt;</code> tag, you can put an icon.{{/i}}</p>
<p>{{_i}}Essentially, anywhere you can put an <code>&lt;i&gt;</code> tag, you can put an icon. And if you need to position the text with no icon before it (where other items have an icon; see the navigation example below) simply use <code>.icon</code> class with no other classes:{{/i}}</p>
<pre class="prettyprint linenums">
&lt;i class="icon"&gt;&lt;/i&gt;
</pre>
</div>
</div>
<h3>{{_i}}Examples{{/i}}</h3>
<div class="row">
<div class="span6">
<p>{{_i}}Use them in buttons, or in button groups for a toolbar style presentation.{{/i}}</p>
<p>
<a class="btn" href="#"><i class="icon refresh"></i> {{_i}}Refresh{{/i}}</a>
<a class="btn success" href="#"><i class="icon white shopping-cart"></i> {{_i}}Checkout{{/i}}</a>
<a class="btn danger" href="#"><i class="icon white trash"></i> {{_i}}Delete{{/i}}</a>
</p>
<div class="span4">
<p>{{_i}}Use them in buttons - of all types and sizes.{{/i}}</p>
<div class="btn-toolbar">
<div class="btn-group">
<a class="btn" href="#"><i class="icon font"></i></a>
<a class="btn" href="#"><i class="icon bold"></i></a>
<a class="btn" href="#"><i class="icon italic"></i></a>
</div>
<div class="btn-group">
<a class="btn" href="#"><i class="icon align-left"></i></a>
<a class="btn" href="#"><i class="icon align-center"></i></a>
<a class="btn" href="#"><i class="icon align-right"></i></a>
<a class="btn" href="#"><i class="icon align-justify"></i></a>
</div>
<div class="btn-group">
<a class="btn primary" href="#"><i class="icon white user"></i> {{_i}}User{{/i}}</a>
<a class="btn primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#"><i class="icon pencil"></i> {{_i}}Edit{{/i}}</a></li>
<li><a href="#"><i class="icon trash"></i> {{_i}}Delete{{/i}}</a></li>
<li><a href="#"><i class="icon ban-circle"></i> {{_i}}Ban{{/i}}</a></li>
<li class="divider"></li>
<li><a href="#"><i class="icon"></i> {{_i}}Make Admin{{/i}}</a></li>
</ul>
</div>
</div>
<p>
<a class="btn large" href="#"><i class="icon refresh"></i> {{_i}}Refresh{{/i}}</a>
<a class="btn" href="#"><i class="icon refresh"></i> {{_i}}Refresh{{/i}}</a>
<a class="btn success" href="#"><i class="icon white shopping-cart"></i> {{_i}}Checkout{{/i}}</a>
<a class="btn danger" href="#"><i class="icon white trash"></i> {{_i}}Delete{{/i}}</a>
</p>
<p>
<a class="btn large" href="#"><i class="icon comment"></i> {{_i}}Comment{{/i}}</a>
<a class="btn small" href="#"><i class="icon cog"></i> {{_i}}Settings{{/i}}</a>
<a class="btn small info" href="#"><i class="icon white info-sign"></i> {{_i}}More Info{{/i}}</a>
</p>
</div>
<div class="span3">
<p>{{_i}}Or, use them in navigation.{{/i}}</p>
<div class="span4">
<p>{{_i}}Use them in navigation.{{/i}}</p>
<div class="well" style="padding: 8px 0;">
<ul class="nav list">
<li class="active"><a href="#"><i class="icon white home"></i> {{_i}}Home{{/i}}</a></li>
<li><a href="#"><i class="icon book"></i> {{_i}}Library{{/i}}</a></li>
<li><a href="#"><i class="icon pencil"></i> {{_i}}Applications{{/i}}</a></li>
<li><a href="#"><i class="icon"></i> {{_i}}Misc{{/i}}</a></li>
</ul>
</div> <!-- /well -->
</div>
<div class="span4">
<form>
<p>{{_i}}Use them with prepended forms.{{_i}}</p>
<div class="control-group">
<label class="control-label" for="prependedInput">{{_i}}Your Email Address:{{/i}}</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon envelope"></i></span>
<input class="span32" id="iconInput" size="16" type="text">
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="iconSelect">{{_i}}Your Location:{{/i}}</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon map-marker"></i></span>
<select id="iconSelect">
<option>Istanbul</option>
<option>London</option>
<option>New York</option>
<option>Tokyo</option>
</select>
</div>
</div>
</div>
</form>
</div>
</div>
</section>
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment