mirror of
https://github.com/ForkAwesome/Fork-Awesome.git
synced 2025-01-16 02:00:30 +08:00
122 lines
4.1 KiB
HTML
122 lines
4.1 KiB
HTML
<section id="new-naming">
|
|
<h2 class="page-header">New Naming Conventions in {{ site.fontawesome.minor_version }}</h2>
|
|
<p class="lead text-center alert alert-info">fa-icon-[name]-[shape]-[alt]-[direction]</p>
|
|
<p>
|
|
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 names of variants.
|
|
</p>
|
|
<div class="row">
|
|
<div class="col-md-4 col-sm-6">
|
|
<h4 class="margin-bottom-sm">fa-icon-*</h4>
|
|
<p class="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="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="margin-bottom-sm">Circle under previous modifier</p>
|
|
<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
|
|
</li>
|
|
<li>
|
|
<i class="fa-icon fa-icon-exclamation-circle fa-icon-li"></i>
|
|
fa-icon-exclamation-circle
|
|
</li>
|
|
<li>
|
|
<i class="fa-icon fa-icon-plus-circle fa-icon-li"></i>
|
|
fa-icon-plus-circle
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-4 col-sm-6">
|
|
<h4 class="margin-bottom-sm">*-square</h4>
|
|
<p class="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="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="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>
|
|
|
|
</section>
|