Chapter 93: Icons Text
Text Icons The table below shows the Free Font Awesome 5 Text icons:
followed by the table with preview | class name | unicode | Try it button.
1. What is the “Icons Text” page?
This page collects only the icons that represent:
- text formatting controls
- typography tools
- alignment options
- font styles
- list styles
- indentation
- quotation marks
- text size / height / width adjustments
- strikethrough / underline / bold / italic indicators
These icons are extremely useful (probably in the top 10 most used categories on CMS / blog / editor sites) for:
- Rich-text editor toolbars (CKEditor, TinyMCE, Quill, Summernote, Froala…)
- Blog / article / post creation interfaces
- “Format text” / “Style options” dropdowns
- Email composer tools
- Note-taking / document editing apps
- “Text settings” / “Typography controls” in themes or page builders
- Admin panels where users can style content
- “Bold / Italic / Underline” buttons
- Alignment / list / indent controls
In Font Awesome 5 free, the Text / Formatting category is small but very targeted — only about 20–25 icons (mostly solid fas style). Font Awesome 6 and 7 added many more (text-slash, align-justify variants, indent / outdent icons, font-case, text-height / width more variants), but FA5 free already has the classic text formatting symbols that are still powering the majority of content editors and CMS toolbars in 2026.
2. Main Free Text / Formatting Icons in Font Awesome 5
Here are the most important and frequently used ones (solid fas unless noted):
| Icon name | Class name | Looks like | Most common meaning / usage |
|---|---|---|---|
| bold | fas fa-bold | B | Bold / strong text |
| italic | fas fa-italic | I | Italic / emphasis |
| underline | fas fa-underline | U̲ | Underline text |
| strikethrough | fas fa-strikethrough | S̶t̶r̶i̶k̶e̶t̶h̶r̶o̶u̶g̶h̶ | Strikethrough / delete line |
| font | fas fa-font | Aa | Font family / typeface selector |
| text-height | fas fa-text-height | Aa↑↓ | Line height / vertical spacing |
| text-width | fas fa-text-width | Aa←→ | Text width / letter spacing |
| align-left | fas fa-align-left | ≡ left | Align text left |
| align-center | fas fa-align-center | ≡ center | Align text center |
| align-right | fas fa-align-right | ≡ right | Align text right |
| align-justify | fas fa-align-justify | ≡ justified | Justify text (full width) |
| list | fas fa-list | ••• | Unordered list (bullets) |
| list-ol | fas fa-list-ol | 1. 2. 3. | Ordered list (numbers) |
| list-ul | fas fa-list-ul | • • • | Unordered list (alternative bullet style) |
| indent | fas fa-indent | →→ | Increase indent / tab right |
| outdent | fas fa-outdent | ←← | Decrease indent / tab left |
| quote-left | fas fa-quote-left | ❝ | Opening quote / blockquote start |
| quote-right | fas fa-quote-right | ❞ | Closing quote / blockquote end |
These are the core free text/formatting icons in FA5 — very clean and instantly recognizable for any rich-text or typography context.
3. Real Code Examples – How Developers Actually Use Them
Example 1: Classic Rich-Text Editor Toolbar (very common in CMS)
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<div style="border:1px solid #ddd; padding:12px; background:#f8f9fa; border-radius:8px; display:flex; gap:12px; flex-wrap:wrap; max-width:800px; margin:40px auto;"> <button title="Bold"><i class="fas fa-bold"></i></button> <button title="Italic"><i class="fas fa-italic"></i></button> <button title="Underline"><i class="fas fa-underline"></i></button> <button title="Strikethrough"><i class="fas fa-strikethrough"></i></button> <span style="border-left:1px solid #ddd; margin:0 8px;"></span> <button title="Align Left"><i class="fas fa-align-left"></i></button> <button title="Align Center"><i class="fas fa-align-center"></i></button> <button title="Align Right"><i class="fas fa-align-right"></i></button> <button title="Justify"><i class="fas fa-align-justify"></i></button> <span style="border-left:1px solid #ddd; margin:0 8px;"></span> <button title="Bullet List"><i class="fas fa-list-ul"></i></button> <button title="Numbered List"><i class="fas fa-list-ol"></i></button> <button title="Increase Indent"><i class="fas fa-indent"></i></button> <button title="Decrease Indent"><i class="fas fa-outdent"></i></button> <span style="border-left:1px solid #ddd; margin:0 8px;"></span> <button title="Quote"><i class="fas fa-quote-left"></i></button> </div> |
Example 2: “Write a Post” / “Add Comment” Button
HTML
|
0 1 2 3 4 5 6 7 8 9 |
<button style="background:#673ab7; color:white; padding:16px 32px; border:none; border-radius:50px; font-size:1.3rem; cursor:pointer; box-shadow:0 4px 12px rgba(103,58,183,0.3);"> <i class="fas fa-pen" style="margin-right:12px; font-size:1.6rem;"></i> Write New Post </button> |
Example 3: Quote / Testimonial Block with Icons
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 |
<blockquote style="border-left:5px solid #673ab7; padding-left:25px; font-style:italic; color:#555; margin:50px auto; max-width:700px; font-size:1.4rem;"> <i class="fas fa-quote-left fa-2x" style="color:#673ab7; margin-right:12px; vertical-align:middle;"></i> The best way to predict the future is to create it. <i class="fas fa-quote-right fa-2x" style="color:#673ab7; margin-left:12px; vertical-align:middle;"></i> <br><small style="color:#888;">— Peter Drucker</small> </blockquote> |
Example 4: “Text Formatting Options” Dropdown Style
HTML
|
0 1 2 3 4 5 6 7 8 9 10 |
<div style="display:inline-flex; align-items:center; gap:12px; padding:12px 24px; background:#f8f9fa; border-radius:50px; font-size:1.3rem;"> <i class="fas fa-font" style="font-size:1.8rem; color:#673ab7;"></i> <span>Font Family</span> <i class="fas fa-caret-down" style="margin-left:8px;"></i> </div> |
4. Teacher Summary – Quick Recap
Font Awesome 5 Text / Formatting Icons = W3Schools’ page listing free typography & text styling icons like:
- bold B
- italic I
- underline U̲
- strikethrough S̶t̶r̶i̶k̶e̶
- quote-left ❝ / quote-right ❞
- align-left ≡left / align-center ≡center / align-right ≡right / align-justify ≡justified
- list-ul ••• / list-ol 1.2.3.
- indent →→ / outdent ←←
- font Aa / text-height Aa↑↓ / text-width Aa←→
Very useful for:
- Rich-text editor toolbars
- Blog / CMS / note-taking interfaces
- Quote / testimonial blocks
- Text alignment & list controls
- “Format” / “Style” buttons
Got it now? Want me to:
- Build a full rich-text toolbar or blog editor demo page with these icons?
- Show how they look in a modern Medium / Notion-style writing interface?
- Compare FA5 vs FA6/7 text icons (way more formatting controls in newer versions)?
- Or move to the next category in the series?
Just tell your teacher — we’re formatting text today! Aa I U̲ ❝ ❞ 🚀
