Dawn Theme | How to use custom icons in product text

Store Design
, , , , , ,

Topic summary

A user wants to replace emoji icons (currently copy-pasted emoticons) in their product text with custom icons on the Dawn theme.

Suggested Solutions:

  • Use Unicode symbol websites like coolsymbol.com to find and paste alternative icon characters directly into product titles/descriptions
  • Install Font Awesome icons by:
    1. Downloading Font Awesome files
    2. Uploading them to the Assets directory via theme code editor
    3. Linking the CSS file in the theme.liquid section
    4. Using <i> tags with appropriate classes (e.g., <i class="fa fa-home"></i>)

Ongoing Issue:
One user reports Font Awesome icons display as placeholders instead of loading properly. They suspect incorrect file paths in font-awesome.min.css (references ‘../webfonts/’ but files are in Assets). They’ve uploaded .ttf and .woff2 font files and attempted path adjustments, but icons still fail to load.

The discussion remains unresolved regarding the Font Awesome implementation problem.

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
4

Hi,

the guide doesnt work. The icons are not displayed for me, there is only a placeholder, the icons do not seem to be able to be loaded. Could it be that the path is incorrect? In font-awesome.min.css the fonts all have the path ‘../webfonts’

for example ‘../webfonts/v4compatibility.woff2’. I have tried everything to adjust the path, but the shop does not load it.

P.S. Is it enough to upload the .ttf and .woff2 files in assets? (the SVGs are not necessary?)