使用 React 加载字体图标

Question

我通过 flaticon 下载了一些图标。 现在我试图在我的组件中使用一个图标，但是出了点问题。 我在我的组件中导入 css，并将我的 webpack.config.json 设置为使用文件加载器加载所有字体文件。

我做错了什么？

我在 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]'
                    }
                }
            ])
        }
    ]

我的组件 - 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"; }

ttf、eot、woff、svg 文件与 css 位于同一位置

谢谢！

编辑： 我正在添加编译后源代码的打印屏幕，文件名和引用仍然匹配...

source code from browser

Answer 1

我遇到了同样的问题。 我在当前项目中使用自定义字体，我需要添加 :global，因为我不希望 css-loader 散列我的类名。

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

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

PS：我正在使用 url 加载器来加载我的字体

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

Answer 2

很难说哪里出了问题。我认为您的 webpack 文件加载器使用文件加载器中的哈希为字体提供了不同的名称。由于新的（散列）文件名，浏览器无法找到您的 css 中定义的字体（Flatico.*）。

我在我的 webpack 中使用了一个特殊的文件加载器来获取输出中的字体。

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

我的字体存储在 app/fonts 文件夹中。所有字体都放在输出文件夹中而不更改它们的文件名

Answer 3

终于找到答案了！

问题确实出在 Stefan van de Vooren 建议的装载程序生成的新名称上。但不在字体文件名中。 在 flaticon.css 中，请注意只有以“flaticon-”开头或包含“flaticon-”的类才会得到“font-family:Flaticon;”。 但是我的 css-loader 被配置为根据以下规则生成新的选择器名称：

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

创建的选择器名称与字体系列的规则不匹配。 所以我的解决方案是替换 [name] 和 [local] 的顺序：

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

现在新名称以原始选择器名称“flaticon-”开头。