Question

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

我做错了什么？

我在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

有点难以分辨出错。我认为你的webpack文件加载器使用文件加载器中的哈希为字体赋予不同的名称。由于新的（散列）文件名，浏览器无法找到您的CSS中定义的字体（Flatico。*）。

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

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

我的字体存储在app / fonts文件夹中。 Alle字体放在输出文件夹中而不更改其文件名

Answer 2

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

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

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

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

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

Answer 3

终于找到了答案！

这个问题确实与装载机生成的新名称有关，因为 Stefan van de Vooren 建议。但不是在字体文件名中。在flaticon.css中，请注意只有以＆＃34; flaticon开头的类 - ＆＃34;或含有＆＃34; flaticon - ＆＃34;将获得＆＃34; font-family：Flaticon;＆＃34;。但我的css-loader配置为根据以下规则生成新的选择器名称：

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

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

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

现在，新名称以原始选择器名称开头，即＆＃39; flaticon - ＆＃39;。

用React加载字体图标

3 个答案: