Loading font icons with React

Question

I downloaded some icons via flaticon. Now I'm trying to use an icon in my component but something goes wrong. I'm importing the css inside my component, and had my webpack.config.json set to load all the font files using file-loader.

what am i doing wrong?

my loaders in webpack.config.json:

loaders: [
        {
            test: /\.(jpe?g|png|gif|svg|eot|ttf|woff)$/i,
            loader: 'file-loader',
            query:{
                hash:'sha512',
                digest:'hex',
                name:'[hash].[ext]'
            }
        },
        {
            test: /\.jsx?$/,
            exclude: /(node_modules|bower_components)/,
            loader: 'babel-loader',
            query: {
                presets: ['react'],
            }
        },
        {
            test: /\.css$/,
            exclude: /(node_modules|bower_components)/,
            loader: combineLoaders([
                {
                    loader: 'style-loader'
                }, {
                    loader: 'css-loader',
                    query: {
                        modules: true,
                        camelCase: 'dashes',
                        localIdentName: '[name]__[local]___[hash:base64:5]'
                    }
                }
            ])
        }
    ]

my component - LocationIndicator.js:

import React from 'react';
import locationFonts from '../../../location-fonts/flaticon.css';

var LocationIndicator = React.createClass({
    render: function () {
        return(
            <span className={locationFonts['flaticon-cactus']}></span>
        );
    }

});

export default LocationIndicator;

flaticon.css:

    /*
    Flaticon icon font: Flaticon
    Creation date: 24/02/2017 14:52
    */

@font-face {
  font-family: "Flaticon";
  src: url("./Flaticon.eot");
  src: url("./Flaticon.eot?#iefix") format("embedded-opentype"),
       url("./Flaticon.woff") format("woff"),
       url("./Flaticon.ttf") format("truetype"),
       url("./Flaticon.svg#Flaticon") format("svg");
  font-weight: normal;
  font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: "Flaticon";
    src: url("./Flaticon.svg#Flaticon") format("svg");
  }
}

[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {   
  font-family: Flaticon;
        font-size: 20px;
font-style: normal;
margin-left: 20px;
}

.flaticon-cactus:before { content: "\f100"; }
.flaticon-desert-cactus:before { content: "\f101"; }
.flaticon-location:before { content: "\f102"; }
.flaticon-map-marker:before { content: "\f103"; }
.flaticon-map-with-position-marker:before { content: "\f104"; }
.flaticon-placeholder-circle:before { content: "\f105"; }
.flaticon-placeholder-map:before { content: "\f106"; }

the ttf, eot, woff, svg file are at the same location as the css

thanks!

edit: I'm adding a print screen of the source code after compilation, the file names and references still match...

source code from browser

What error do you got?

fhelwanger
– fhelwanger

2017-02-24 16:29:22 +00:00
Commented Feb 24, 2017 at 16:29 — fhelwanger
– fhelwanger, Commented Feb 24, 2017 at 16:29
That's the fun part, i don't get any error

Ofir P
– Ofir P

2017-02-25 18:07:23 +00:00
Commented Feb 25, 2017 at 18:07 — Ofir P
– Ofir P, Commented Feb 25, 2017 at 18:07

Alfred Crosby · Accepted Answer · 2017-02-25 07:18:34Z

3

I experienced the same problem. I'm using custom font on my current project, I need to add :global since I don't want css-loader hash my classname.

:global [class^="icon-"]:before,
:global [class*=" icon-"]:before {
  ...
}

:global .icon-close:before {
  ...
}

PS: I am using url loader to load my fonts

{
    test: /\.(eot|svg|ttf|woff|woff2)$/,
    loader: 'url-loader?limit=1000&name=fonts/[name].[ext]'
}

answered Feb 25, 2017 at 7:18

Alfred Crosby

1361 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ofir P Over a year ago

didn't help, also tried to use url-loader. why do you care about not hashing the classname? The classname is replaced with the hashed classname in the html too...

Stefan van de Vooren · Accepted Answer · 2017-02-24 19:59:09Z

1

It's a little hard to tell what goes wrong. I think your webpack file-loader is giving the fonts a different name with the hash in the file-loader. Because of the new (hashed) filename, the browser could not find the fonts (Flatico.*) defined in your css.

I'm using a special file loader in my webpack to get the fonts in the output.

{ test: /\.(svg|eot|ttf|woff|woff2)$/, loader: 'file?name=fonts/[name].[ext]', include: [path.resolve(__dirname, 'app/fonts')] }

My fonts are stored in the app/fonts folder. Alle fonts are put in the output folder without changing their file names

answered Feb 24, 2017 at 19:59

Stefan van de Vooren

2,78524 silver badges19 bronze badges

3 Comments

Ofir P Over a year ago

the font files did get a different name but the names in the css changed too so i don't see the problem with hashing the names.. anyway didn't solve my problem :-\

Stefan van de Vooren Over a year ago

Ok, are the fonts loaded when you open the webinspector? or is nothing requested at all?

Ofir P Over a year ago

Nothing is requested at all. I found the problem and you were a bit right, something was wrong with the names the loader generated for the css selectors. I will write a full answer shortly

Ofir P · Accepted Answer · 2017-02-26 22:04:03Z

Finally found the answer!

The problem was indeed something with the new names generated by the loaders as Stefan van de Vooren suggested. But not in the font file names. In flaticon.css, notice that only classes that begin with "flaticon-" or containing " flaticon-" will get "font-family:Flaticon;". but my css-loader was configured to generate the new selector names according to the following rule:

localIdentName: '[name]__[local]___[hash:base64:5]'

which creates selector names that doesn't match the rule for the font family. So my solution was replacing the order of [name] and [local]:

localIdentName: '[local]__[name]___[hash:base64:5]'

Now the new names begin with the original selector name which is 'flaticon-'.

Collectives™ on Stack Overflow

Loading font icons with React

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related