To display an icon font inside WordPress post content, load its CSS with the content-focused enqueue_block_assets hook (WordPress 6.3 and later), or declare the stylesheet in your block’s block.json. Use enqueue_block_editor_assets only for the editor interface itself, such as custom controls. The distinction matters because the Post Editor’s interface and the document canvas are separate styling targets, and modern WordPress versions render the canvas in an iframe.
Decide what you are styling
First determine where the icon will appear:
| Target | Use | Typical examples |
|---|---|---|
| Post content (the document canvas) | enqueue_block_assets or block stylesheet metadata |
An icon span inside a paragraph, button, or custom block |
| Editor interface | enqueue_block_editor_assets with wp_enqueue_style() or wp_enqueue_script() |
A custom toolbar button, inspector control, or block-inserter UI |
A block-inserter icon identifies a block; it does not automatically render an icon in the post. Post content still needs the font file, glyph CSS, and rendered markup.
Load an existing icon-font stylesheet
Reuse the site’s registered font
If the theme or a plugin already loads the font on the front end, reuse that stylesheet rather than registering a second copy. Confirm the same font URL, glyph class names, and CSS are available to the editor canvas. The font provider, class naming, hosting rules, and license remain provider-specific; WordPress’s enqueue APIs do not define them.
Enqueue content styles for WordPress 6.3 and later
For styles that affect user-generated blocks, add an enqueue_block_assets callback. This hook loads the stylesheet in the editor canvas and on the front end.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
#1 Best Overall
<?php
function mysite_enqueue_icon_font() {
wp_enqueue_style(
'mysite-icon-font',
get_theme_file_uri( '/assets/css/icons.css' ),
array(),
'1.0.0'
);
}
add_action( 'enqueue_block_assets', 'mysite_enqueue_icon_font' );Place the provider’s @font-face declaration, glyph mappings, and any required icon rules in assets/css/icons.css. If the icons are needed on the public page as well as in the editor, do not wrap the enqueue call in an admin-only condition. Conversely, an editor-only stylesheet should be limited deliberately so it is not sent to visitors.
Account for older WordPress versions
On WordPress 6.2 and earlier, the handbook warns that enqueue_block_assets does not load styles into an iframed editor canvas. If those versions are in your support range, use the documented backward-compatible approach: enqueue the stylesheet with enqueue_block_editor_assets and target the content with editor-specific selectors, while also enqueueing the front-end stylesheet separately.
Check your minimum supported version before choosing this fallback. The Site Editor always uses an iframe; WordPress 7.1 and Gutenberg 23.6 always use one for the Post Editor, while WordPress 7.0 retains a conditional fallback.
Declare icon styles in a custom block
For a custom block, put the styles in block.json so WordPress can load the correct scope automatically:
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 problems{
"style": "file:./style.css",
"editorStyle": "file:./editor.css",
"viewStyle": "file:./view.css"
}styleloads in the editor and on the front end when the block is used.editorStyleis for the editor canvas.viewStyleis front-end only.
Choose the narrowest scope that matches the block. If the glyph must be visible while editing and after publishing, style is generally the relevant declaration; keep interface-only rules in editorStyle.
Use a theme editor stylesheet when appropriate
add_editor_style() can load a theme stylesheet for the editor. Gutenberg scopes those rules beneath .editor-styles-wrapper. Limit icon selectors to the content or block class that owns them, for example:
Rank #4
.editor-styles-wrapper .my-icon {
font-family: "My Icons";
font-style: normal;
}A broad front-end reset in this stylesheet can change editor controls as well as post content. Avoid importing a global reset without checking its effect on the editor interface.
Make the markup render correctly
- Verify that the font file URL resolves from both the editor canvas and the public page.
- Inspect the saved markup and confirm that it contains the provider’s intended glyph class (or your block’s icon class).
- Check that the selected font weight and style include that glyph; a mismatched weight can produce a blank or fallback character.
- Look for a successful font request in the browser’s network panel in each context.
- Open the post in the editor and then view the published page to confirm appearance, alignment, and responsive behavior.
These checks catch the common case in which an icon appears on the published page but not in Gutenberg: the font CSS was enqueued only for the front end, or the editor canvas is isolated in an iframe.
Best Value
Consider WordPress’s built-in Icon block
If you do not already depend on a particular icon font, the built-in Icon block avoids provider-specific font files and classes. In the Block Inserter, search for Icon or type /icon.
- Resize the icon without raster-quality loss.
- Set icon and background colors.
- Align, flip, or rotate the icon.
- Replace the selected icon.
- Adjust label, dimensions, and border settings.
Use the label field to briefly describe an informative icon for screen-reader users. Leave it blank when the icon is decorative, as recommended in the Icon block documentation. The block is often the simpler choice when reusable font classes, a provider license, or cross-context font hosting would add unnecessary maintenance.
Handle accessibility when using raw icon-font markup
Icon fonts are visual glyphs, not automatically meaningful text. If an icon conveys information or triggers an action, provide an accessible name in the surrounding control or an equivalent text alternative. For a decorative glyph, hide it from assistive technology and ensure the surrounding content still communicates the purpose. Do not assume the Icon block’s label behavior is reproduced by an arbitrary <span> or CSS pseudo-element; verify the final HTML and screen-reader output with your actual theme and markup.
Quick Recap
Choose between an icon font and the Icon block
| Question | Icon font | Built-in Icon block |
|---|---|---|
| Does the site already rely on a font and its classes? | Reuse the existing system and markup. | May require replacing established markup. |
| Will editor and front-end output stay in sync? | Requires correct enqueue scope and version handling. | Managed by the block, with no third-party font enqueue. |
| How much visual and markup control is needed? | High control over reusable classes and CSS. | Block controls cover common sizing, color, transform, and border needs. |
| What accessibility work is required? | You must supply names or decorative treatment in your markup. | Provides a label control intended for informative icons. |
| What external obligations apply? | Provider hosting, licensing, font URLs, and maintenance. | No external icon-font provider is required. |
Quick troubleshooting checklist
- Works on the front end only: move content CSS to
enqueue_block_assets(6.3+) or use the older-version fallback. - Works in the editor but not after publishing: ensure the stylesheet is not editor-only; use
styleor a front-end enqueue as appropriate. - Blank square or wrong symbol: check the font request, glyph class, font weight, and provider’s CSS mapping.
- Editor controls look distorted: narrow
add_editor_style()selectors and remove broad resets. - Accessibility warning: add an accessible name for meaningful icons or hide decorative glyphs from assistive technology.
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.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →
