github/bootstrap
1
1
Fork 0
mirror of https://github.com/jasny/bootstrap.git synced 2026-01-21 20:27:59 -05:00
Code Issues Packages Projects Releases Wiki Activity

Documented iconic icons

Browse Source 
Added jasny/iconic.less to jasny/bootstrap.less
Makefile also copies the fonts
This commit is contained in:
Arnold Daniels
2012-07-17 00:26:22 +02:00
parent 9f7fe483ce
commit b8632ca0bb
6 changed files with 256 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
Makefile
View File

@@ -26,6 +26,7 @@ build:
@node docs/build
@cp img/* docs/assets/img/
@cp js/*.js docs/assets/js/
@cp -r fonts docs/assets/
@cp js/tests/vendor/jquery.js docs/assets/js/
@echo "Compiling documentation... ${CHECK} Done"
@cat js/bootstrap-transition.js js/bootstrap-alert.js js/bootstrap-button.js js/bootstrap-carousel.js js/bootstrap-collapse.js js/bootstrap-dropdown.js js/bootstrap-modal.js js/bootstrap-tooltip.js js/bootstrap-popover.js js/bootstrap-scrollspy.js js/bootstrap-tab.js js/bootstrap-typeahead.js > docs/assets/js/bootstrap.js
@@ -61,7 +62,9 @@ bootstrap:
mkdir -p bootstrap/img
mkdir -p bootstrap/css
mkdir -p bootstrap/js
mkdir -p bootstrap/fonts
cp img/* bootstrap/img/
cp fonts/* bootstrap/fonts/
recess --compile ${BOOTSTRAP_LESS} ${JASNY_BOOTSTRAP_LESS} > bootstrap/css/bootstrap.css
recess --compress ${BOOTSTRAP_LESS} ${JASNY_BOOTSTRAP_LESS} > bootstrap/css/bootstrap.min.css
recess --compile ${BOOTSTRAP_RESPONSIVE_LESS} ${JASNY_BOOTSTRAP_RESPONSIVE_LESS} > bootstrap/css/bootstrap-responsive.css
@@ -80,6 +83,8 @@ bootstrap:
jasny-bootstrap:
mkdir -p jasny-bootstrap/css
mkdir -p jasny-bootstrap/js
mkdir -p jasny-bootstrap/fonts
cp fonts/* jasny-bootstrap/fonts/
recess --compile ${JASNY_BOOTSTRAP_LESS} > jasny-bootstrap/css/jasny-bootstrap.css
recess --compress ${JASNY_BOOTSTRAP_LESS} > jasny-bootstrap/css/jasny-bootstrap.min.css
recess --compile ${JASNY_BOOTSTRAP_RESPONSIVE_LESS} > jasny-bootstrap/css/jasny-bootstrap-responsive.css

20
docs/assets/css/docs.css
View File

@@ -572,11 +572,29 @@ form.well {
------------------------- */
.the-icons {
margin-left: 0;
margin-bottom: 18px;
list-style: none;
}
.the-icons i:hover {
.the-icons i[class*="icon-"] {
margin-bottom: 5px;
}
.the-icons i[class*="icon-"]:hover {
background-color: rgba(255,0,0,.25);
}
.the-icons i[class*="iconic-"] {
display: block;
}
.the-icons i[class*="iconic-"]:after {
margin-left: 6px;
content: attr(class);
font-style: normal;
}
#javascript input[type=checkbox] {
position: relative;
top: -1px;
display: inline;
margin-left: 6px;
}
/* Eaxmples page
------------------------- */

1
docs/templates/layout.mustache vendored
View File

@@ -96,6 +96,7 @@
<p>{{_i}}Extended with pride by <a href="http://twitter.com/ArnoldDaniels" target="_blank">@ArnoldDaniels</a> of <a href="http://www.jasny.net/" target="_blank">Jasny Software solutions</a>.{{/i}}</p>
<p>{{_i}}Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.{{/i}}</p>
<p>{{_i}}Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.{{/i}}</p>
<p>{{_i}}<a href="http://somerandomdude.com/work/iconic/">Iconic icon set font</a>, licensed under the <a href="http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL">SIL Open Font License</a>.{{/i}}</p>
</footer>
</div><!-- /container -->

223
docs/templates/pages/base-css.mustache vendored
View File

@@ -12,6 +12,7 @@
<li><a href="#buttons">{{_i}}Buttons{{/i}}</a></li>
<li><a href="#action-links">{{_i}}Action links{{/i}}</a></li>
<li><a href="#icons">{{_i}}Icons by Glyphicons{{/i}}</a></li>
<li><a href="#iconic">{{_i}}Iconic icons{{/i}}</a></li>
</ul>
</div>
</header>
@@ -1811,3 +1812,225 @@ on multiple lines
</div>
</div>
</section>
<section id="iconic">
<div class="page-header">
<h1>Iconic icons <small>Graciously provided by <a href="http://somerandomdude.com/work/iconic/" target="_blank">P.J. Onori</a></small></h1>
</div>
<div class="row">
<div class="span3">
<div class="the-icons">
<i class="iconic-hash"></i>
<i class="iconic-question-mark"></i>
<i class="iconic-at"></i>
<i class="iconic-pilcrow"></i>
<i class="iconic-info"></i>
<i class="iconic-home"></i>
<i class="iconic-sun"></i>
<i class="iconic-sun-stroke"></i>
<i class="iconic-cloud"></i>
<i class="iconic-rain"></i>
<i class="iconic-umbrella"></i>
<i class="iconic-bolt"></i>
<i class="iconic-star"></i>
<i class="iconic-moon"></i>
<i class="iconic-moon-stroke"></i>
<i class="iconic-heart"></i>
<i class="iconic-heart-stroke"></i>
<i class="iconic-trash"></i>
<i class="iconic-trash-stroke"></i>
<i class="iconic-link"></i>
<i class="iconic-mail"></i>
<i class="iconic-fork"></i>
<i class="iconic-cog"></i>
<i class="iconic-wrench"></i>
<i class="iconic-clock"></i>
<i class="iconic-compass"></i>
<i class="iconic-dial"></i>
<i class="iconic-lightbulb"></i>
<i class="iconic-box"></i>
<i class="iconic-award"></i>
<i class="iconic-award-stroke"></i>
<i class="iconic-left-quote"></i>
<i class="iconic-right-quote"></i>
<i class="iconic-left-quote-alt"></i>
<i class="iconic-right-quote-alt"></i>
<i class="iconic-x"></i>
<i class="iconic-check"></i>
<i class="iconic-plus"></i>
<i class="iconic-minus"></i>
<i class="iconic-o-x"></i>
<i class="iconic-o-check"></i>
<i class="iconic-o-plus"></i>
<i class="iconic-o-minus"></i>
</div>
</div>
<div class="span3">
<div class="the-icons">
<i class="iconic-user"></i>
<i class="iconic-chat"></i>
<i class="iconic-chat-alt"></i>
<i class="iconic-chat-alt-stroke"></i>
<i class="iconic-comment"></i>
<i class="iconic-comment-stroke"></i>
<i class="iconic-comment-alt1"></i>
<i class="iconic-comment-alt1-stroke"></i>
<i class="iconic-comment-alt2"></i>
<i class="iconic-comment-alt2-stroke"></i>
<i class="iconic-image"></i>
<i class="iconic-chart"></i>
<i class="iconic-chart-alt"></i>
<i class="iconic-aperture"></i>
<i class="iconic-aperture-alt"></i>
<i class="iconic-cursor"></i>
<i class="iconic-denied"></i>
<i class="iconic-eye"></i>
<i class="iconic-magnifying-glass"></i>
<i class="iconic-pen"></i>
<i class="iconic-pen-alt"></i>
<i class="iconic-pen-alt-stroke"></i>
<i class="iconic-pen-alt2"></i>
<i class="iconic-brush"></i>
<i class="iconic-brush-alt"></i>
<i class="iconic-eyedropper"></i>
<i class="iconic-layers"></i>
<i class="iconic-layers-alt"></i>
<i class="iconic-target"></i>
<i class="iconic-tag"></i>
<i class="iconic-tag-stroke"></i>
<i class="iconic-rss"></i>
<i class="iconic-rss-alt"></i>
<i class="iconic-share"></i>
<i class="iconic-undo"></i>
<i class="iconic-curved-arrow"></i>
<i class="iconic-key"></i>
<i class="iconic-key-stroke"></i>
<i class="iconic-lock"></i>
<i class="iconic-lock-stroke"></i>
<i class="iconic-unlock"></i>
<i class="iconic-unlock-stroke"></i>
<i class="iconic-steering-wheel"></i>
</div>
</div>
<div class="span3">
<div class="the-icons">
<i class="iconic-arrow-left"></i>
<i class="iconic-arrow-up"></i>
<i class="iconic-arrow-right"></i>
<i class="iconic-arrow-down"></i>
<i class="iconic-move"></i>
<i class="iconic-move-alt"></i>
<i class="iconic-move-horizontal"></i>
<i class="iconic-move-horizontal-alt"></i>
<i class="iconic-move-vertical"></i>
<i class="iconic-move-vertical-alt"></i>
<i class="iconic-o-arrow-left"></i>
<i class="iconic-o-arrow-left-alt"></i>
<i class="iconic-o-arrow-up"></i>
<i class="iconic-o-arrow-up-alt"></i>
<i class="iconic-o-arrow-right"></i>
<i class="iconic-o-arrow-right-alt"></i>
<i class="iconic-o-arrow-down"></i>
<i class="iconic-o-arrow-down-alt"></i>
<i class="iconic-o-move"></i>
<i class="iconic-o-move-horizontal"></i>
<i class="iconic-o-move-vertical"></i>
<i class="iconic-fullscreen"></i>
<i class="iconic-fullscreen-alt"></i>
<i class="iconic-fullscreen-exit"></i>
<i class="iconic-fullscreen-exit-alt"></i>
<i class="iconic-new-window"></i>
<i class="iconic-reload"></i>
<i class="iconic-reload-alt"></i>
<i class="iconic-loop"></i>
<i class="iconic-loop-alt"></i>
<i class="iconic-back-forth"></i>
<i class="iconic-back-forth-alt"></i>
<i class="iconic-spin"></i>
<i class="iconic-spin-alt"></i>
<i class="iconic-transfer"></i>
<i class="iconic-download"></i>
<i class="iconic-upload"></i>
<i class="iconic-cloud-download"></i>
<i class="iconic-cloud-upload"></i>
<i class="iconic-article"></i>
<i class="iconic-read-more"></i>
<i class="iconic-list"></i>
<i class="iconic-list-nested"></i>
</div>
</div>
<div class="span3">
<div class="the-icons">
<i class="iconic-play"></i>
<i class="iconic-o-play"></i>
<i class="iconic-pause"></i>
<i class="iconic-stop"></i>
<i class="iconic-eject"></i>
<i class="iconic-first"></i>
<i class="iconic-last"></i>
<i class="iconic-volume"></i>
<i class="iconic-volume-mute"></i>
<i class="iconic-headphones"></i>
<i class="iconic-mic"></i>
<i class="iconic-equalizer"></i>
<i class="iconic-battery-half"></i>
<i class="iconic-battery-empty"></i>
<i class="iconic-battery-charging"></i>
<i class="iconic-battery-full"></i>
<i class="iconic-bars"></i>
<i class="iconic-bars-alt"></i>
<i class="iconic-movie"></i>
<i class="iconic-cd"></i>
<i class="iconic-folder"></i>
<i class="iconic-folder-stroke"></i>
<i class="iconic-document"></i>
<i class="iconic-document-stroke"></i>
<i class="iconic-document-alt"></i>
<i class="iconic-document-alt-stroke"></i>
<i class="iconic-pin"></i>
<i class="iconic-map-pin"></i>
<i class="iconic-map-pin-stroke"></i>
<i class="iconic-map-pin-alt"></i>
<i class="iconic-book"></i>
<i class="iconic-book-alt"></i>
<i class="iconic-book-alt2"></i>
<i class="iconic-calendar"></i>
<i class="iconic-calendar-alt"></i>
<i class="iconic-calendar-alt-stroke"></i>
<i class="iconic-iphone"></i>
<i class="iconic-camera"></i>
<i class="iconic-beaker"></i>
<i class="iconic-beaker-alt"></i>
</div>
</div>
</div>
<div class="row">
<div class="span4">
<h3>{{_i}}Icons as a font{{/i}}</h3>
<p>{{_i}}Instead of using images, the Iconic icons are a font. This has the advantage that they can be any color you like, have the same size as your text and are subject to CSS text effects.{{/i}}</p>
<p>{{_i}}All icons classes are prefixed with <code>.iconic-</code> for proper namespacing and scoping, much like our other components. This will help avoid conflicts with other tools.{{/i}}</p>
<p>{{_i}}The <a href="http://somerandomdude.com/work/iconic/" target="_blank">Iconic icons</a> have been created by P.J. Onori of the <i>Some Random Dude</i> blog.{{/i}}</p>
</div>
<div class="span4">
<h3>{{_i}}How to use{{/i}}</h3>
<p>{{_i}}For iconic icons you can use an <code>&lt;i&gt;</code> tag, just like regular for icons. To use, place the following code just about anywhere:{{/i}}</p>
<pre class="prettyprint linenums">
&lt;i class="iconic-search"&gt;&lt;/i&gt;
</pre>
<p>{{_i}}There are 170 classes to choose from for your iconic icons. Just add an <code>&lt;i&gt;</code> tag with the right classes and you're set. You can find the full list right here in this document.{{/i}}</p>
</div>
<div class="span4">
<h3>{{_i}}Styling{{/i}}</h3>
<p>{{_i}}Since iconic icons are a font, they will automatically match the text size and style. You can even use text effects, like <code>text-shadow</code>.{{/i}}</p>
<p>An external <a href="#"><i class="iconic-link"></i> link</a> and some <i><i class="iconic-lock"></i> italic text</i>.</p>
<p style="font-size: 20px;"><i class="iconic-o-check"></i> <i class="iconic-o-check" style="color: #999999"></i> <i class="iconic-o-check" style="color: #0044CC"></i> <i class="iconic-o-check" style="color: #2F96B4"></i> <i class="iconic-o-check" style="color: #51A351"></i> <i class="iconic-o-check" style="color: #F89406"></i> <i class="iconic-o-check" style="color: #BD362F"></i> <i class="iconic-o-check" style="color: purple"></i></p>
<p style="font-size: 20px; color: #468847"><i class="iconic-check"></i> Approved</p>
<p><span style="color: #F89406; font-weight: bold; text-shadow: 1px 1px 4px #F89406"><i class="iconic-rss"></i> RSS feed</span></p>
</div>
</div>
</section>

7
docs/templates/pages/index.mustache vendored
View File

@@ -57,6 +57,13 @@
<p>{{_i}}Action links look distinctly different than normal links.{{/i}}</p>
</div>
</div>
<div class="row">
<div class="span3">
<h3><a href="./base-css.html#action-links">{{_i}}Iconic icons{{/i}}</a></h3>
<p>{{_i}}The iconic font set adds 170 new icons to Bootstrap. These icons can be used with buttons, menus, links, etc.{{/i}}</p>
<p>{{_i}}Because these icons are a font, they can be styled just like text.{{/i}}</p>
</div>
</div>
<div class="row">
<div class="span3">
<h3><a href="./base-css.html#forms">{{_i}}Form elements{{/i}}</a></h3>

1
less/jasny/bootstrap.less vendored
View File

@@ -19,6 +19,7 @@
// Components: Buttons & Alerts
@import "action-links.less";
@import "iconic.less";
// Components: Nav
@import "navs-tabbable.less";