mirror of
https://github.com/twbs/bootstrap.git
synced 2024-09-24 20:17:19 +00:00
66 lines
4.2 KiB
HTML
66 lines
4.2 KiB
HTML
<div class="bs-docs-section">
|
|
<h1 id="glyphicons" class="page-header">Glyphicons</h1>
|
|
|
|
<h2 id="glyphicons-glyphs">Available glyphs</h2>
|
|
<p>Includes 200 glyphs in font format from the Glyphicon Halflings set. <a href="http://glyphicons.com/">Glyphicons</a> Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask that you include a link back to <a href="http://glyphicons.com/">Glyphicons</a> whenever possible.</p>
|
|
<div class="bs-glyphicons">
|
|
<ul class="bs-glyphicons-list">
|
|
{% for iconClassName in site.data.glyphicons %}
|
|
<li>
|
|
<span class="glyphicon {{ iconClassName }}"></span>
|
|
<span class="glyphicon-class">glyphicon {{ iconClassName }}</span>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
<h2 id="glyphicons-how-to-use">How to use</h2>
|
|
<p>For performance reasons, all icons require a base class and individual icon class. To use, place the following code just about anywhere. Be sure to leave a space between the icon and text for proper padding.</p>
|
|
<div class="bs-callout bs-callout-danger">
|
|
<h4>Don't mix with other components</h4>
|
|
<p>Icon classes cannot be directly combined with other components. They should not be used along with other classes on the same element. Instead, add a nested <code><span></code> and apply the icon classes to the <code><span></code>.</p>
|
|
</div>
|
|
<div class="bs-callout bs-callout-danger">
|
|
<h4>Only for use on empty elements</h4>
|
|
<p>Icon classes should only be used on elements that contain no text content and have no child elements.</p>
|
|
</div>
|
|
<div class="bs-callout bs-callout-info">
|
|
<h4>Changing the icon font location</h4>
|
|
<p>By default, Bootstrap assumes that the icon font files will be located in the <code>../fonts/</code> directory relative to your deployed CSS. For example, if your CSS file is at <code>http://example.com/foobar/css/bootstrap.css</code>, then your font files should be at <code>http://example.com/foobar/fonts/glyphicons-halflings-regular.woff</code>, etc.</p>
|
|
<p>If you are placing the icon font files elsewhere or changing their filenames, you will need to adjust the <code>@icon-font-path</code> and/or <code>@icon-font-name</code> Less variables accordingly.</p>
|
|
</div>
|
|
<div class="bs-callout bs-callout-info">
|
|
<h4><code>@import</code>ing Bootstrap via Less may require adjusting the icon font location</h4>
|
|
<p>If you <code>@import</code> Bootstrap's Less source into your own Less file, you may need to adjust the <code>@icon-font-path</code> Less variable due to the way that the relative paths in our <code>url(...)</code>s work.</p>
|
|
</div>
|
|
{% highlight html %}
|
|
<span class="glyphicon glyphicon-search"></span>
|
|
{% endhighlight %}
|
|
|
|
|
|
<h2 id="glyphicons-examples">Examples</h2>
|
|
<p>Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.</p>
|
|
<div class="bs-example">
|
|
<div class="btn-toolbar" role="toolbar">
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button>
|
|
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button>
|
|
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button>
|
|
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-justify"></span></button>
|
|
</div>
|
|
</div>
|
|
<div class="btn-toolbar" role="toolbar">
|
|
<button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-star"></span> Star</button>
|
|
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-star"></span> Star</button>
|
|
<button type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-star"></span> Star</button>
|
|
<button type="button" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-star"></span> Star</button>
|
|
</div>
|
|
</div>
|
|
{% highlight html %}
|
|
<button type="button" class="btn btn-default btn-lg">
|
|
<span class="glyphicon glyphicon-star"></span> Star
|
|
</button>
|
|
{% endhighlight %}
|
|
</div>
|