码迷,mamicode.com
首页 > Web开发 > 详细

React+Webpack项目中使用Iconfont字体图标

时间:2020-05-02 16:52:09      阅读:93      评论:0      收藏:0      [点我收藏+]

标签:ash   href   www   figure   技术   idt   currently   iconfont   pack   

1、官网下载要使用的字体图标

下载链接,下载后解压出来的文件如下:

技术图片

2、将所需的字体文件和样式文件复制到项目的静态资源文件夹中:

技术图片

3、在App.js中或者需要使用图标字体样式的组件中引入iconfont.css文件:

import ‘../../style/iconfont/iconfont.css‘;  //注意路径不要写错

4、在组件中要使用图标字体的位置,可以通过使用iconfont类或unicode编码来实现图标效果:

    //使用类名来实现图标效果
    //iconfont为iconfont.css文件中定义的类名,必写
    //icon-meishi 为iconfont.css文件中要使用的图标类名
    <span className="iconfont icon-meishi"></span>     //jsx文件
    
    //使用unicode来实现图标效果
    //iconfont为iconfont.css文件中定义的类名,必写
    <span className="iconfont">&#xe61c;</span>         //jsx文件    

5、编译时报错

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
技术图片

6、安装profile-loader

npm install file-loader --save-dev

webpack.config.js中配置:
技术图片

7、最终实现效果

技术图片

React+Webpack项目中使用Iconfont字体图标

标签:ash   href   www   figure   技术   idt   currently   iconfont   pack   

原文地址:https://www.cnblogs.com/snaillu/p/12818359.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!