Skip to content

Commit

Permalink
Merge branch 'main' of https://github.com/Viglino/font-gis
Browse files Browse the repository at this point in the history
  • Loading branch information
Viglino committed Jun 30, 2021
2 parents 26d820d + ba22a96 commit 9abe846
Showing 1 changed file with 8 additions and 8 deletions.
16 changes: 8 additions & 8 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -160,8 +160,8 @@ <h2>fg-poi</h2>
<h2>Icon size and color</h2>
<p>
To increase icon sizes relative to their container,
use the <code>fa-lg</code> (33% increase),
<code>fa-2x</code>, <code>fa-3x</code>, <code>fa-4x</code>, or <code>fa-5x</code> classes.
use the <code>fg-lg</code> (33% increase),
<code>fg-2x</code>, <code>fg-3x</code>, <code>fg-4x</code>, or <code>fg-5x</code> classes.
<br/>
<i class="fg-road-map"></i>
<i class="fg-road-map fg-lg"></i>
Expand All @@ -182,7 +182,7 @@ <h2>Icon size and color</h2>
</p>
<h2>Fixed width icons</h2>
<p>
Use <code>fa-fw</code> class to set icons at a fixed width.
Use <code>fg-fw</code> class to set icons at a fixed width.
Especially designed to use in nav lists & list groups to preserve alignment.
<ul>
<li>
Expand All @@ -201,7 +201,7 @@ <h2>Fixed width icons</h2>
</p>
<h2>Rotated and flipped icons</h2>
<p>
Use <code>fa-rotate*</code> classes to rotate icons (-20, -10, 10, 20, 45, 90, 135, 180, 225, 270 or 315).
Use <code>fg-rotate*</code> classes to rotate icons (-20, -10, 10, 20, 45, 90, 135, 180, 225, 270 or 315).
<br/>
<i class="fg-pushpin fg-2x"></i>
<i class="fg-pushpin fg-rotate-10 fg-2x"></i>
Expand All @@ -210,14 +210,14 @@ <h2>Rotated and flipped icons</h2>
<i class="fg-pushpin fg-rotate20 fg-2x"></i>
</p>
<p>
Use <code>fa-flipv</code> or <code>fa-fliph</code> classes to flip icons vertically or horizontally.
Use <code>fg-flipv</code> or <code>fg-fliph</code> classes to flip icons vertically or horizontally.
<br/>
<i class="fg-hiker fg-2x"></i>
<i class="fg-hiker fg-fliph fg-2x"></i>
</p>
<h2>Stacked icons</h2>
<p>
To stack multiple icons, use the <code>fa-stack</code> class on the parent.
To stack multiple icons, use the <code>fg-stack</code> class on the parent.
<pre style="color:#000000;background:#f1f0f0;"><span style="color:#a65700; ">&lt;</span><span style="color:#400000; font-weight:bold; ">span</span><span style="color:#074726; "> </span><span style="color:#074726; ">class</span><span style="color:#806030; ">=</span><span style="color:#e60000; ">"fg-stack fg-3x"</span><span style="color:#a65700; ">&gt;</span>
<span style="color:#a65700; ">&lt;</span><span style="color:#400000; font-weight:bold; ">i</span><span style="color:#074726; "> </span><span style="color:#074726; ">class</span><span style="color:#806030; ">=</span><span style="color:#e60000; ">"fg-compass"</span><span style="color:#074726; "> </span><span style="color:#074726; ">style</span><span style="color:#806030; ">=</span><span style="color:#e60000; ">"</span><span style="color:#bb7977; font-weight:bold; ">color</span><span style="color:#806030; ">:</span><span style="color:#8c0000; ">#</span><span style="color:#c00000; ">666</span><span style="color:#806030; ">;</span><span style="color:#e60000; ">"</span><span style="color:#a65700; ">&gt;</span><span style="color:#a65700; ">&lt;/</span><span style="color:#400000; font-weight:bold; ">i</span><span style="color:#a65700; ">&gt;</span>
<span style="color:#a65700; ">&lt;</span><span style="color:#400000; font-weight:bold; ">i</span><span style="color:#074726; "> </span><span style="color:#074726; ">class</span><span style="color:#806030; ">=</span><span style="color:#e60000; ">"fg-compass-needle fg-rotate45"</span><span style="color:#074726; "> </span><span style="color:#074726; ">style</span><span style="color:#806030; ">=</span><span style="color:#e60000; ">"</span><span style="color:#bb7977; font-weight:bold; ">color</span><span style="color:#806030; ">:</span><span style="color:#8c0000; ">#</span><span style="color:#c00000; ">800</span><span style="color:#806030; ">;</span><span style="color:#e60000; ">"</span><span style="color:#a65700; ">&gt;</span><span style="color:#a65700; ">&lt;/</span><span style="color:#400000; font-weight:bold; ">i</span><span style="color:#a65700; ">&gt;</span>
Expand All @@ -231,7 +231,7 @@ <h2>Stacked icons</h2>

<h2>Animations</h2>
<p>
Use <code>fa-spin</code> or <code>fa-pulse</code> classes to animate icons.
Use <code>fg-spin</code> or <code>fg-pulse</code> classes to animate icons.
</p>
<span class="fg-stack fg-3x">
<i class="fg-compass" style="color:#666;"></i>
Expand Down Expand Up @@ -267,4 +267,4 @@ <h2>Animations</h2>
<script async defer src="https://buttons.github.io/buttons.js"></script>
<script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

</body>
</body>

0 comments on commit 9abe846

Please sign in to comment.