Semantic UI icon fonts displayed as squares

[umbravi]

I've been searching through all other solutions, and semantic seems to be working correctly, all css is loaded correctly, and icon font reference codes are correct. It feels like the font isn't being delivered to the client.

Default webpack configs.

With a default install of semantic ui, all of the fonts are built:

[./src/assets/semantic/dist/themes/default/assets/fonts/icons.eot] 82 bytes {mini-css-extract-plugin} [built]

Css is correct in body[hash].css

@font-face{font-family:Icons;src:url(/8e3c7f5520f5ae906c6cf6d7f3ddcd19.eot);.<more src references>

style shows correct icon code that matches css

i.icon.paragraph:before {
    content: "\F1DD";
}

There are also flag png files that are loaded and display correctly in the same folder structure.

Semantic takes care of all of it's styles, so, what am I missing?

[tomatau]

If you open the body.css file that's generated in your browser and then search for @font-face you'll maybe see something like this:

@font-face {
  font-family: 'Icons';
  src: url(/8e3c7f5520f5ae906c6cf6d7f3ddcd19.eot);
  src: url(/8e3c7f5520f5ae906c6cf6d7f3ddcd19.eot?#iefix) format('embedded-opentype'), url(/0ab54153eeeca0ce03978cc463b257f7.woff2) format('woff2'), url(/faff92145777a3cbaf8e7367b4807987.woff) format('woff'), url(/b87b9ba532ace76ae9f6edfe9f72ded2.ttf) format('truetype'), url("<svg xmlns=\"http://www.w3.org/2000/svg\"><defs><font id=\"fontawesome-free\" horiz-adv-x=\"640\"><font-face font-family=\"Font Awesome 5 Free\" units-per-em=\"512\" ascent=\"448\" descent=\"64\" font-weight=\"900\" font-sty...

You can see that the Icons are trying to use the svg which is being loaded as svg markup instead of a url.

So you can change the webpack.base.config to use base64 strings for svgs like this:

{
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'url-loader',
        options: { limit: 10000, mimetype: 'image/svg+xml' },
      },

In the past I've wanted to support both types of svg import so done things along these lines:

      {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        include: [ /semantic-ui/ ],
        loader: 'url-loader',
        options: { limit: 10000, mimetype: 'image/svg+xml' },
      }, {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        exclude: [ /semantic-ui/ ],
        use: [
          {
            loader: 'svg-inline-loader',
            options: { removeTags: false, removeSVGTagAttrs: false },
          }, {
            loader: 'svgo-loader',
            options: svgoConfig,
          },
        ],
      },

Ensuring that the include and exclude are tweaked appropriately.

[umbravi]

That's beautiful! I'm going to need to set aside time this week to dig into webpack and loaders a bit more. Thanks for the help, again!