Owadud

<p><strong>External Link Icon for Gutenberg</strong> adds a new Gutenberg block called <strong>Link with Icon</strong>.</p>
<p>Each block contains its own link URL, link text, icon choice, and display options — all configured in one place. There are no global settings that affect your whole site.</p>
<p><strong>How to use:</strong></p>
<ol>
<li>In the block editor, click the <strong>+</strong> button to add a block</li>
<li>Search for <strong>“Link with Icon”</strong></li>
<li>Insert the block</li>
<li>Enter your URL in the on-canvas URL field and click <strong>Add Link</strong></li>
<li>Open the block <strong>sidebar</strong> (right panel) to:
<ul>
<li>Set link text</li>
<li>Toggle new tab / nofollow</li>
<li>Pick an icon from the <strong>Dashicons</strong> or <strong>SVG Icons</strong> tab</li>
<li>Set icon position (before or after text)</li>
</ul>
</li>
<li>The live preview updates as you make changes</li>
</ol>
<p><strong>Icon sets:</strong></p>
<ul>
<li><strong>Dashicons</strong> — WordPress built-in icon font (32 icons, no extra network request)</li>
<li><strong>SVG Icons</strong> — 32 bundled stroke-based SVG icons, rendered inline (no CDN, no webfont)</li>
</ul>
<p><strong>Principles:</strong></p>
<ul>
<li>No global icon settings — each block is fully independent</li>
<li>Image links are not affected (this is a dedicated block, not a link filter)</li>
<li>Server-side PHP rendering — compatible with all caching plugins</li>
<li>No jQuery required</li>
</ul>


External Link Icon for Gutenberg

A Gutenberg block for creating a link with a Dashicon or Font Awesome icon. Per-block, not global.

Themeisle

WPShout

<p>This plugin gives you the ability to add icons to your menu items, similar to the look of the latest dashboard menu.</p>
<p><span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/YcSotWXIczI?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span></p>
<h4>Usage</h4>
<ol>
<li>After the plugin is activated, go to <em>Appearance</em> > <em>Menus</em> to edit your menus</li>
<li>Enable/Disable icon types in “Menu Icons Settings” meta box</li>
<li>Set default settings for current nav menu; these settings will be inherited by the newly added menu items</li>
<li>Select icon by clicking on the “Select icon” link</li>
<li>Save the menu</li>
</ol>
<h4>Supported icon types</h4>
<ul>
<li>Dashicons (WordPress core icons)</li>
<li><a href="http://shoestrap.org/downloads/elusive-icons-webfont/" rel="nofollow ugc">Elusive Icons</a> by <a href="http://shoestrap.org/blog/author/aristath/" rel="nofollow ugc">Aristeides Stathopoulos</a></li>
<li><a href="http://fontawesome.io/" rel="nofollow ugc">Font Awesome</a> by <a href="http://twitter.com/davegandy" rel="nofollow ugc">Dave Gandy</a></li>
<li><a href="http://zurb.com/playground/foundation-icon-fonts-3/" rel="nofollow ugc">Foundation Icons</a> by <a href="http://zurb.com/" rel="nofollow ugc">Zurb</a></li>
<li><a href="http://genericons.com/" rel="nofollow ugc">Genericons</a> by <a href="http://automattic.com/" rel="nofollow ugc">Automattic</a></li>
<li><a href="http://fontello.com/" rel="nofollow ugc">Fontello</a> icon packs</li>
<li><a href="http://themeisle.com/free-icons/" rel="nofollow ugc">TI Icons</a> icon pack by <a href="http://twitter.com/themeisle" rel="nofollow ugc">ThemeIsle</a></li>
<li>Image (attachments)</li>
<li>SVG (attachments)</li>
</ul>
<h4>Planned supported icon types</h4>
<ul>
<li>Image (URL)</li>
</ul>
<h4>Compatible themes</h4>
<p>Menu icons works with most of the themes out there, especially with popular ones like Twenty Seventeen or <a href="https://themeisle.com/themes/hestia/" rel="nofollow ugc">Hestia</a>.</p>
<p>Development of this plugin is done on <a href="https://github.com/codeinwp/wp-menu-icons" rel="nofollow ugc">GitHub</a>. <strong>Pull requests welcome</strong>. Please see <a href="https://github.com/codeinwp/wp-menu-icons/issues" rel="nofollow ugc">issues reported</a> there before going to the plugin forum.</p>
<h3>If you like this plugin, then consider checking out our other projects:</h3>
<p><a href="https://www.codeinwp.com/blog/" rel="nofollow ugc">CodeinWP Blog</a> – Designer’s Guide To WordPress<br />
<a href="https://revive.social" rel="nofollow ugc">Revive.Social</a> – Social Media Tools<br />
<a href="https://justfreethemes.com" rel="nofollow ugc">JustFreeThemes</a> – Free WordPress Themes directory</p>


Menu Icons by Themeisle – Add Icons to Navigation Menus

Add icons to WordPress navigation menus easily — pick from Font Awesome, Dashicons, image icons & more. Style menu items with custom colors & sizes.

External Link Icon for Gutenberg vs Menu Icons by Themeisle – Add Icons to Navigation Menus