What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
To show an icon font in both the WordPress post editor and the published post, load its CSS where block content is rendered. For WordPress 6.3 and later, the documented PHP hook for content styles is enqueue_block_assets. Use enqueue_block_editor_assets for assets that belong to the editor interface, such as a custom toolbar or inspector control—not simply to style icons inside a post.
Choose the right editor target
The block editor has two distinct styling targets: its interface and the post’s content. An icon in a custom editor control belongs to the interface; an icon inserted into a paragraph, button, or custom block belongs to content. Loading the font for one target does not necessarily make it available in the other.
- Post or block content: use
enqueue_block_assetsfor content styles, or the relevant stylesheet metadata for a custom block. - Editor interface: use
enqueue_block_editor_assetswithwp_enqueue_styleorwp_enqueue_script.
WordPress describes enqueue_block_assets as the primary method for styles used by user-generated block content; it loads in the editor and on the front end. Its handbook distinguishes that from enqueue_block_editor_assets, which is for the editor itself: Enqueueing assets in the Editor.
Load an icon font for post content
1. Check whether the font is already registered
Look for an existing theme or plugin stylesheet that loads the font and defines its glyph classes. If it is already in use on the public site, reuse that stylesheet where possible rather than loading duplicate copies. The font provider determines the required font files, class names, and licensing terms; WordPress’s enqueue documentation does not prescribe those details.
#1 Best Overall
2. Make the font CSS available to content
Your stylesheet needs the provider’s font-face declaration, glyph mappings, and any rules required by the markup you plan to use. Confirm that the font-file URL resolves from both the editor and the public page, and that the provider allows your intended use.
3. Enqueue the stylesheet for block content
For WordPress 6.3 and later, use the PHP enqueue_block_assets action for content styles. WordPress says this hook loads assets in the iframed editor as well as on the front end. Do not add an is_admin() condition that prevents the public page from receiving the stylesheet if the icons also appear there.
The exact enqueue call depends on how your theme or plugin registers the stylesheet. Keep the scope tied to the content or block that needs the icons rather than applying broad rules across editor controls.
Free tools Windows power users keep installed
One-click scans. No signup required.
4. Check version compatibility
On WordPress 6.2 and earlier, the handbook warns that enqueue_block_assets does not load assets into iframed editor content. It describes using enqueue_block_editor_assets with content-targeting selectors as a backward-compatibility alternative. Confirm the site’s minimum supported WordPress version before choosing an implementation.
Editor iframe behavior has also changed over time. According to the handbook last updated July 24, 2026, the Site Editor always uses an iframe, and WordPress 7.1 and Gutenberg 23.6 always use one for the Post Editor. WordPress 7.0 retains a conditional fallback. See the WordPress editor asset guidance for the version-specific details.
Set stylesheet scope for a theme or custom block
Theme editor stylesheet
add_editor_style() is another option for a theme stylesheet intended to match front-end content in the editor. WordPress prefixes Gutenberg stylesheet selectors with .editor-styles-wrapper. Scope icon rules to the relevant content or block class, and avoid applying a broad front-end reset that could unintentionally alter editor controls. The function reference for add_editor_style() explains the selector behavior and reset caveat.
Rank #4
Custom block stylesheet metadata
For a custom block, declare styles in block.json according to where they are needed:
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Fix the driver behind crashes, sound loss and screen glitches3Repair Windows errors before they cause bigger problemseditorStyleloads a stylesheet in the editor.styleloads in the editor and on the front end when the block is used.viewStyleis front-end only.
Choose the setting that matches the block’s rendering requirements; WordPress documents these distinctions in Use styles and stylesheets.
Best Value
Verify the icon in both places
Check the post in the editor and on the published page. If an icon is missing, inspect the relevant page context and confirm that:
- the icon-font stylesheet loads there;
- the font-file request succeeds;
- the markup contains the glyph class expected by that font; and
- the selected font weight or style includes the glyph.
A plugin’s icon in the block inserter is not the same as an icon rendered in post content. Block registration can use Dashicons or a custom SVG to identify a block, but content still needs suitable markup and styles. WordPress documents the editor use of Dashicons.
Consider the built-in Icon block
If you do not need a particular third-party font or its class names, WordPress’s built-in Icon block may be simpler. Find it by searching in the Block Inserter or typing /icon in the editor. Its documented controls include resizing, custom icon and background colors, alignment, flip and rotate actions, replacing the icon, and settings for label, color, dimensions, and border. See the WordPress Icon block documentation.
The Icon block’s label is intended to briefly describe an informative icon for screen-reader users; WordPress advises leaving it blank for decorative icons. If you instead use raw icon-font markup, supply an accessible name or equivalent text when the icon conveys meaning, and hide purely decorative glyphs from assistive technology. Check the final HTML and screen-reader output with your actual theme and markup: the block’s label behavior does not automatically apply to arbitrary spans or CSS pseudo-elements.
Quick Recap
When to use each approach
| Approach | Best fit | What to account for |
|---|---|---|
| Existing icon font | The site already uses the font and its glyph classes. | Load its CSS in the content context, verify editor and front-end behavior, and check provider licensing and hosting requirements. |
| Custom block stylesheet | A block needs its own icon styling with deliberate editor and front-end scope. | Choose editorStyle, style, or viewStyle to match where the style is required. |
| WordPress Icon block | You need an icon in content but do not depend on a specific font set. | Use its label for informative icons and leave the label blank for decorative ones; verify accessibility in context. |
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
