Chapter 8: Icons Arrow
1. What is the “Icons Arrows” Page?
It’s a focused cheat-sheet showing only arrow icons.
These are super useful for:
- Navigation (next/previous, up/down in menus)
- Sorting tables (asc/desc arrows)
- Sliders/carousels (left/right arrows)
- “Back to top” buttons
- Expand/collapse accordions
- Pagination
- Download/upload indicators
- Pointing to important stuff (like “Read more →”)
FA5 has many free arrow icons — directions (up, down, left, right), angles, circles with arrows, long arrows, rotate arrows, etc. (Newer FA6/7 added even more fancy ones like curved or hand-drawn, but FA5 covers the essentials perfectly.)
2. Main Free Arrow Icons in Font Awesome 5 (From the Page – Most Common Ones)
Here are the key free ones you’ll see listed (mostly solid fas, some regular far or brands if applicable, but arrows are mainly solid):
- Basic directions<i class=”fas fa-arrow-up”></i> ↑ <i class=”fas fa-arrow-down”></i> ↓ <i class=”fas fa-arrow-left”></i> ← <i class=”fas fa-arrow-right”></i> →
- Angle arrows (smaller, 45° style – great for menus) <i class=”fas fa-angle-up”></i><i class=”fas fa-angle-down”></i><i class=”fas fa-angle-left”></i><i class=”fas fa-angle-right”></i>
- Double angles (bigger jumps, like << or >>) <i class=”fas fa-angle-double-up”></i><i class=”fas fa-angle-double-down”></i><i class=”fas fa-angle-double-left”></i><i class=”fas fa-angle-double-right”></i>
- Circle arrows (rounded buttons look) <i class=”fas fa-arrow-circle-up”></i><i class=”fas fa-arrow-circle-down”></i><i class=”fas fa-arrow-circle-left”></i><i class=”fas fa-arrow-circle-right”></i>
- Alt circle arrows (thinner outline version – regular style) <i class=”far fa-arrow-alt-circle-up”></i><i class=”far fa-arrow-alt-circle-down”></i><i class=”far fa-arrow-alt-circle-left”></i><i class=”far fa-arrow-alt-circle-right”></i>
- Long arrows (stretched for emphasis) <i class=”fas fa-long-arrow-alt-up”></i><i class=”fas fa-long-arrow-alt-down”></i><i class=”fas fa-long-arrow-alt-left”></i><i class=”fas fa-long-arrow-alt-right”></i>
- Rotate / refresh<i class=”fas fa-redo”></i> (clockwise) <i class=”fas fa-undo”></i> (counter-clockwise) <i class=”fas fa-sync”></i> (sync arrows)
- Expand / compress<i class=”fas fa-expand-arrows-alt”></i><i class=”fas fa-compress-arrows-alt”></i>
- Exchange / shuffle<i class=”fas fa-exchange-alt”></i> (horizontal swap) <i class=”fas fa-random”></i> (shuffle)
And more like fa-arrows-alt (move/drag), fa-sort-up, fa-sort-down, etc.
3. Real Code Examples – How to Use Arrow Icons
Example 1: Simple “Back to Top” Button (very common)
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 |
<!-- FA5 CDN in <head> --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"> <a href="#" style="position: fixed; bottom: 20px; right: 20px; background: #007bff; color: white; width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-decoration: none;"> <i class="fas fa-arrow-up" style="font-size: 1.8rem;"></i> </a> |
Example 2: Pagination Controls
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div style="text-align: center; margin: 20px;"> <button style="padding: 10px 15px;"> <i class="fas fa-angle-double-left"></i> First </button> <button style="padding: 10px 15px;"> <i class="fas fa-angle-left"></i> Prev </button> <span>Page 5 of 20</span> <button style="padding: 10px 15px;"> Next <i class="fas fa-angle-right"></i> </button> <button style="padding: 10px 15px;"> Last <i class="fas fa-angle-double-right"></i> </button> </div> |
Example 3: Read More Link (right arrow)
HTML
|
0 1 2 3 4 5 6 7 8 |
<a href="#" style="color: #007bff; text-decoration: none; font-weight: bold;"> Read More <i class="fas fa-long-arrow-alt-right" style="margin-left: 8px;"></i> </a> |
Example 4: Sort Icons in Table Header
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 |
<th> Name <i class="fas fa-sort-up" style="color: #28a745;"></i> <!-- Ascending active --> </th> <th> Price <i class="fas fa-sort"></i> <!-- Neutral --> </th> |
Example 5: Refresh / Sync Button
HTML
|
0 1 2 3 4 5 6 7 8 |
<button style="background: #28a745; color: white; padding: 12px;"> <i class="fas fa-sync fa-spin" style="margin-right: 8px;"></i> Refresh Data </button> |
4. Teacher Tips for Arrow Icons
- Direction consistency — Right arrow for “next/go forward”, left for “back”, up for “expand/more”, down for “collapse”.
- Spin animation — Add fa-spin for loading/refresh: <i class=”fas fa-sync fa-spin”></i>
- Size & color — Use fa-2x, fa-3x, or style=”color: red;” to make them pop.
- Accessibility — If decorative, add aria-hidden=”true”. If meaningful, pair with text or aria-label.
- In newer Font Awesome (6/7), arrows got sharper variants and more styles (thin, duotone), but FA5 arrows are clean and still used everywhere.
Summary – Quick Recap
Icons Arrows = W3Schools’ page listing Font Awesome 5 free arrow icons like arrow-up ↑, angle-right >, long-arrow-alt-left ←, arrow-circle-down, etc. Perfect for navigation, sorting, buttons, links — basically anything that “points” the user somewhere.
Understood, beta? Want me to:
- Make a full mini-navigation bar with arrows?
- Show “next/prev” carousel controls code?
- Compare FA5 arrows vs newer versions?
- Or jump to the next category like “Icons Audio & Video”?
Raise your hand — teacher is waiting! ← ↑ → ↓ 🚀
