React-redux-starter-kit: Empty Squares for unicode based font icons constructed via base64-encoded css.

[josephmcasey]

The title to this issue probably needs reworking.

It seems that the redux and react starter kit does not work with base64-encoded font icons. I am able to access the font library from the built distribution, however an empty square is produced. I've read through the issues. I've tried including the font icons via webpack.module.loader and including the @font-face in
the core.scss file. The unicode content:"\e600" always shows an empty square.

Any ideas on what could cause this?

_icon.scss
----------------
@font-face {
  font-family: 'examplefont';
  src: url(data:application/x-font-ttf;charset=utf-8;base64,<known to work font-icons encoded>) format('truetype');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: "examplefont" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  line-height: 1;
  speak:none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 64px;
  width: 64px;
  display: inline-block;
  fill: black;
}


.icon-example:before {
  content: "\e000";
}

[davezuko]

I think it's because the font isn't being loaded correctly. Honestly most of the issues in this starter kit revolve around the use of CSS modules, and I'm not experienced enough with them to troubleshoot them effectively. Let me try to fiddle around with it and see what happens, but I can say for sure I've had difficulties in the past when trying to, for example, use FontAwesome.

[josephmcasey]

I guess the question to be answered is, how should icon-like assets be handled. I'll write up a personal solution to this and post it here. I think this is more of a design question though. I feel that the starter-kit could have a more fleshed out approach to handling style-related assets. However, I'm not certain what the desired design direction is.

[davezuko]

You're definitely right that it could have a more fleshed out approach, it's sadly just one of those things that I haven't spent a lot of time with. I will try to do more research on the subject, but if you have any recommendations I'd love to hear them.

[josephmcasey]

Well, I think there are two expected ways to properly handle this given the libraries being utilized

1. https://webpack.github.io/docs/list-of-loaders.html Webpack offers the icons loader. This means you'll always load an entire font to utilize any single font on a page.
2. The alternative is that icons are kept as separate svg files and any needed svgs are imported similar to how the images are imported. This means more assets which require organization, but it also means a reduction in the load time unless you import every single icon.

What are your preferences on the matter?

[josephmcasey]

For anyone reading this, I resolved this by simply placing the @font-face above the :global { @import }.

A better solution should be on the way, eventually.

[chenfanggm]

@josephmcasey This works, Thanks.

[theisof]

Thanks, works for me as well.

More specifically, I had to split up the vendor stylesheet for the icon font to put the @font-face above :global and the rest inside :global.