mirror of
https://github.com/ForkAwesome/Fork-Awesome.git
synced 2025-01-16 02:00:30 +08:00
70 lines
2.9 KiB
HTML
70 lines
2.9 KiB
HTML
|
<section id="new-naming" class="feature-list">
|
||
|
|
<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.
|
||
|
|
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.
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-4 col-sm-6">
|
||
|
|
<h4><i class="fa-icon fa-icon-check"></i>fa-icon-check</h4>
|
||
|
|
<ul class="fa-icon-ul padding-left-sm">
|
||
|
|
<li>
|
||
|
|
<i class="fa-icon fa-icon-check-circle fa-icon-li"></i>
|
||
|
|
fa-icon-check-circle -
|
||
|
|
<code>*-circle</code> means a circle is under the previous modifier.
|
||
|
|
</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>
|
||
|
|
<i class="fa-icon fa-icon-exclamation-circle fa-icon-li"></i>
|
||
|
|
fa-icon-exclamation-circle -
|
||
|
|
<code>*-circle</code> means a circle is under the previous modifier.
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<i class="fa-icon fa-icon-exclamation-triangle fa-icon-li"></i>
|
||
|
|
fa-icon-exclamation-triangle -
|
||
|
|
<code>*-triangle</code> means a triangle is under the previous modifier.
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</section>
|