Chapter 29: Icons Editor
1. What is the “Icons Editors” Page?
This page collects only the icons that represent text editing tools, formatting options, rich-text editors, WYSIWYG controls, and common actions you see in word processors, content management systems (like WordPress, CKEditor, TinyMCE), or any inline editor.
These icons are extremely useful for:
- Building or customizing rich-text editors in web apps
- CMS / blog admin panels (WordPress, Ghost, Strapi…)
- Comment editors with formatting (bold, italic, lists…)
- Email composer tools
- Note-taking / markdown editors
- “Edit Post” or “Format Text” toolbars
- Any place where users can style text (headings, quotes, links, alignment…)
In Font Awesome 5 free, the Editors category is small but very practical (around 20–25 icons, mostly solid fas style, some regular far). Newer versions (FA6/7) added many more (underline, strikethrough variants, text-height, paragraph, align-justify, etc.), but FA5 free already covers the most frequently used formatting controls that power millions of content-editing interfaces.
2. Main Free Editor Icons in Font Awesome 5 (From the W3Schools Page)
Here are the most important free ones you’ll see in the table (solid fas unless noted; these are the ones used in almost every rich-text toolbar):
- Bold (B – make text bold) <i class=”fas fa-bold”></i>
- Italic (I – make text italic) <i class=”fas fa-italic”></i>
- Underline (U – underline text) <i class=”fas fa-underline”></i>
- Strikethrough (S with line – strikethrough / delete text) <i class=”fas fa-strikethrough”></i>
- Text Height (Aa with arrows up/down – line height / font size) <i class=”fas fa-text-height”></i>
- Text Width (Aa with arrows left/right – letter spacing / width) <i class=”fas fa-text-width”></i>
- Align Left (lines aligned left) <i class=”fas fa-align-left”></i>
- Align Center (lines centered) <i class=”fas fa-align-center”></i>
- Align Right (lines aligned right) <i class=”fas fa-align-right”></i>
- Align Justify (full justification) <i class=”fas fa-align-justify”></i>
- List Ul (unordered list – bullets) <i class=”fas fa-list-ul”></i>
- List Ol (ordered list – numbers) <i class=”fas fa-list-ol”></i>
- Quote Left / Quote Right (block quote symbols) <i class=”fas fa-quote-left”></i> / <i class=”fas fa-quote-right”></i>
- Link (chain link – insert hyperlink) <i class=”fas fa-link”></i>
- Unlink (broken chain – remove link) <i class=”fas fa-unlink”></i> or alias fa-chain-broken
- Cut (scissors – cut text) <i class=”fas fa-cut”></i>
- Copy (duplicate – copy text) <i class=”fas fa-copy”></i>
- Paste (clipboard paste) <i class=”fas fa-paste”></i>
- Undo (counter-clockwise arrow – undo last action) <i class=”fas fa-undo”></i>
- Redo (clockwise arrow – redo action) <i class=”fas fa-redo”></i>
- Font (A with font dropdown – font family) <i class=”fas fa-font”></i>
- Heading (H1–H6 dropdown) <i class=”fas fa-heading”></i>
These are the core free Editors icons — immediately familiar to anyone who has used Word, Google Docs, or any CMS editor.
3. Real Code Examples – How to Use Editor Icons
Example 1: Simple Rich-Text Toolbar (very common in custom editors)
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 |
<!-- FA5 CDN in <head> --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"> <div style="border: 1px solid #ddd; padding: 10px; background: #f8f9fa; border-radius: 6px; display: flex; gap: 8px; flex-wrap: wrap;"> <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="width: 1px; background: #ccc; 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="width: 1px; background: #ccc; 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="Quote"><i class="fas fa-quote-left"></i></button> <button title="Link"><i class="fas fa-link"></i></button> </div> |
Example 2: Blog Post Editor Header / Formatting Controls
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div style="border-bottom: 1px solid #eee; padding: 15px; display: flex; gap: 12px; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1);"> <button><i class="fas fa-heading"></i></button> <button><i class="fas fa-font"></i></button> <button><i class="fas fa-bold"></i></button> <button><i class="fas fa-italic"></i></button> <button><i class="fas fa-underline"></i></button> <button><i class="fas fa-text-height"></i></button> <button><i class="fas fa-align-left"></i></button> <button><i class="fas fa-align-center"></i></button> <button><i class="fas fa-align-justify"></i></button> <button><i class="fas fa-link"></i></button> <button><i class="fas fa-undo"></i></button> <button><i class="fas fa-redo"></i></button> </div> |
Example 3: “Copy to Clipboard” Button in Code Snippet
HTML
|
0 1 2 3 4 5 6 7 8 9 |
<button style="background: #28a745; color: white; padding: 10px 16px; border: none; border-radius: 6px; cursor: pointer;"> <i class="fas fa-copy" style="margin-right: 8px;"></i> Copy Code </button> |
Example 4: Quote / Testimonial Formatting
HTML
|
0 1 2 3 4 5 6 7 8 9 10 |
<blockquote style="border-left: 4px solid #007bff; padding-left: 20px; font-style: italic; color: #555; margin: 30px 0;"> <i class="fas fa-quote-left" style="color: #007bff; font-size: 2rem; margin-right: 10px;"></i> "Design is not just what it looks like and feels like. Design is how it works." – Steve Jobs <i class="fas fa-quote-right" style="color: #007bff; font-size: 2rem; margin-left: 10px;"></i> </blockquote> |
4. Teacher Tips for Editor Icons
- Colors — Neutral grays (#6c757d) for inactive tools, blues (#007bff) for active/selected formatting, greens (#28a745) for copy/confirm actions.
- Size — Use consistent size (fa-lg or 1.2–1.5rem) inside buttons/toolbars; bigger (fa-2x) for demo/hero sections.
- Combine categories — Pair with Design (paint-brush, crop), Code (laptop-code), or Communication (link) for full content-creation feel.
- Accessibility — Add title=”Bold” or aria-label=”Make text bold” to buttons; hide pure decoratives with aria-hidden=”true”.
- Upgrade note — In Font Awesome 6/7, Editors category is much richer (strikethrough, subscript, superscript, text-slash, paragraph, indent) — upgrade if building a full-featured WYSIWYG editor.
Summary – Quick Recap
Font Awesome 5 Editor Icons = W3Schools’ page listing free text-formatting/editor icons like bold B, italic I, underline U, align-left/center/right/justify, list-ul/ol, quote-left/right, link 🔗, undo/redo ↺/↻, copy/paste, etc. Perfect for rich-text editors, CMS toolbars, blog formatting controls, comment boxes, or any place where users style or edit text.
Got it now? Want me to:
- Build a full mini “Rich Text Toolbar” demo page with these icons?
- Show how they look inside a real-looking editor interface?
- Compare FA5 vs newer versions (more formatting options)?
- Or next category like “Icons Education”?
Just tell teacher — we’re formatting the web beautifully today! 📝🔗🖊️🚀
