FlandreScarle7/Fork-Awesome
1
0
Fork 0
mirror of https://github.com/ForkAwesome/Fork-Awesome.git synced 2024-12-28 06:21:32 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

naming conventions section updated

Browse Source
This commit is contained in:
davegandy 2013-10-18 16:55:57 -04:00
parent 38ab9001c3
commit b007c64141
2 changed files with 104 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

154
src/_includes/new-naming.html
View File

@ -1,69 +1,121 @@
<section id="new-naming" class="feature-list"> <section id="new-naming">
<h2 class="page-header">New Naming Conventions in {{ site.fontawesome.minor_version }}</h2> <h2 class="page-header">New Naming Conventions in {{ site.fontawesome.minor_version }}</h2>
A desire for better icon naming <strong>consistency</strong> and <strong>predictability</strong> are at the heart of the changes in naming conventions. <p>
Once you know the name of the base icon shape, you should be able to predict the name of variants. A desire for better icon naming <strong>consistency</strong> and <strong>predictability</strong> are at the heart
Here are a few examples. of the changes in naming conventions. Once you know the name of the base icon shape, you should be able to predict
the name of variants. Here are a few examples.
</p>
<div class="row"> <div class="row">
<div class="col-md-4 col-sm-6"> <div class="col-md-4 col-sm-6">
<h4><i class="fa-icon fa-icon-check"></i>fa-icon-check</h4> <h4 class="margin-bottom-sm">fa-icon-*</h4>
<p class="text-muted margin-bottom-sm">Solid icons as the base variant</p>
<ul class="fa-icon-ul padding-left-sm">
<li>
<i class="fa-icon fa-icon-bookmark fa-icon-li"></i>
fa-icon-bookmark
</li>
<li>
<i class="fa-icon fa-icon-comment fa-icon-li"></i>
fa-icon-comment
</li>
<li>
<i class="fa-icon fa-icon-folder fa-icon-li"></i>
fa-icon-folder
</li>
</ul>
</div>
<div class="col-md-4 col-sm-6">
<h4 class="margin-bottom-sm">*-alt</h4>
<p class="text-muted margin-bottom-sm">Outlined version of previous modifier</p>
<ul class="fa-icon-ul padding-left-sm">
<li>
<i class="fa-icon fa-icon-bookmark-alt fa-icon-li"></i>
fa-icon-bookmark-alt
</li>
<li>
<i class="fa-icon fa-icon-comment-alt fa-icon-li"></i>
fa-icon-comment-alt
</li>
<li>
<i class="fa-icon fa-icon-folder-alt fa-icon-li"></i>
fa-icon-folder-alt
</li>
</ul>
</div>
<div class="col-md-4 col-sm-6">
<h4 class="margin-bottom-sm">*-circle</h4>
<p class="text-muted margin-bottom-sm">Circle under previous modifier</p>
<ul class="fa-icon-ul padding-left-sm"> <ul class="fa-icon-ul padding-left-sm">
<li> <li>
<i class="fa-icon fa-icon-check-circle fa-icon-li"></i> <i class="fa-icon fa-icon-check-circle fa-icon-li"></i>
fa-icon-check-circle - fa-icon-check-circle
<code>*-circle</code> means a circle is under the previous modifier.
</li> </li>
<li>
<i class="fa-icon fa-icon-check-circle-alt fa-icon-li"></i>
fa-icon-check-circle-alt -
<code>*-alt</code> means that the previous modifier is outlined.
</li>
<li>
<i class="fa-icon fa-icon-check-square fa-icon-li"></i>
fa-icon-check-square -
<code>*-square</code> means a square is under the previous modifier.
</li>
<li>
<i class="fa-icon fa-icon-check-square-alt fa-icon-li"></i>
fa-icon-check-square-alt -
<code>*-alt</code> means that the previous modifier is outlined.
</li>
</ul>
</div>
<div class="col-md-4 col-sm-6">
<h4><i class="fa-icon fa-icon-arrow-right"></i>fa-icon-arrow-right</h4>
<ul class="fa-icon-ul padding-left-sm">
<li>
<i class="fa-icon fa-icon-arrow-circle-right fa-icon-li"></i>
fa-icon-arrow-circle-right -
<code>*-circle</code> means a circle is under the previous modifier.
<code>*-right</code> is the directional modifier, which always comes last to keep icons properly grouped
alphabetically.
</li>
<li>
<i class="fa-icon fa-icon-arrow-circle-alt-right fa-icon-li"></i>
fa-icon-arrow-circle-alt-right -
<code>*-alt</code> means that the previous modifier is outlined.
<code>*-right</code> is the directional modifier, which always comes last to keep icons properly grouped
alphabetically.
</li>
</ul>
</div>
<div class="col-md-4 col-sm-6">
<h4><i class="fa-icon fa-icon-exclamation"></i>fa-icon-exclamation</h4>
<ul class="fa-icon-ul padding-left-sm">
<li> <li>
<i class="fa-icon fa-icon-exclamation-circle fa-icon-li"></i> <i class="fa-icon fa-icon-exclamation-circle fa-icon-li"></i>
fa-icon-exclamation-circle - fa-icon-exclamation-circle
<code>*-circle</code> means a circle is under the previous modifier.
</li> </li>
<li> <li>
<i class="fa-icon fa-icon-exclamation-triangle fa-icon-li"></i> <i class="fa-icon fa-icon-plus-circle fa-icon-li"></i>
fa-icon-exclamation-triangle - fa-icon-plus-circle
<code>*-triangle</code> means a triangle is under the previous modifier.
</li> </li>
</ul> </ul>
</div> </div>
<div class="col-md-4 col-sm-6">
<h4 class="margin-bottom-sm">*-square</h4>
<p class="text-muted margin-bottom-sm">Square under previous modifier</p>
<ul class="fa-icon-ul padding-left-sm">
<li>
<i class="fa-icon fa-icon-check-square fa-icon-li"></i>
fa-icon-check-square
</li>
<li>
<i class="fa-icon fa-icon-twitter-square fa-icon-li"></i>
fa-icon-twitter-square
</li>
<li>
<i class="fa-icon fa-icon-plus-square fa-icon-li"></i>
fa-icon-plus-square
</li>
</ul>
</div>
<div class="col-md-4 col-sm-6">
<h4 class="margin-bottom-sm">*-right, *-up, etc.</h4>
<p class="text-muted margin-bottom-sm">Directional modifier always at the end</p>
<ul class="fa-icon-ul padding-left-sm">
<li>
<i class="fa-icon fa-icon-arrow-right fa-icon-li"></i>
fa-icon-arrow-right
</li>
<li>
<i class="fa-icon fa-icon-arrow-circle-right fa-icon-li"></i>
fa-icon-arrow-circle-right
</li>
<li>
<i class="fa-icon fa-icon-angle-double-right fa-icon-li"></i>
fa-icon-angle-double-right
</li>
</ul>
</div>
<div class="col-md-4 col-sm-6">
<h4 class="margin-bottom-sm">Combine 'em up...</h4>
<p class="text-muted margin-bottom-sm">Consistent when strung together</p>
<ul class="fa-icon-ul padding-left-sm">
<li>
<i class="fa-icon fa-icon-arrow-circle-alt-right fa-icon-li"></i>
fa-icon-arrow-circle-alt-right
</li>
<li>
<i class="fa-icon fa-icon-caret-square-alt-right fa-icon-li"></i>
fa-icon-caret-square-alt-right
</li>
<li>
<i class="fa-icon fa-icon-hand-alt-right fa-icon-li"></i>
fa-icon-hand-alt-right
</li>
</ul>
</div>
</div> </div>
</section> </section>

2
src/whats-new.html
View File

@ -4,7 +4,7 @@ title: What's New
navbar_active: whats-new navbar_active: whats-new
relative_path: ../ relative_path: ../
--- ---
{% capture jumbotron_h1 %}<i class="fa-icon fa-icon-lightbulb"></i>&nbsp; What's New{% endcapture %} {% capture jumbotron_h1 %}<i class="fa-icon fa-icon-lightbulb-alt"></i>&nbsp; What's New{% endcapture %}
{% capture jumbotron_p %}What's New in the latest version &mdash; Font Awesome {{ site.fontawesome.minor_version }}{% endcapture %} {% capture jumbotron_p %}What's New in the latest version &mdash; Font Awesome {{ site.fontawesome.minor_version }}{% endcapture %}
{% include jumbotron.html %} {% include jumbotron.html %}