问

如何使用node-modules中的font-awesome图标

Bd专业8楼nv 发布于 2023-01-30 19:23

npm

我已经安装了font-awesome 4.0.3图标npm install.

如果我需要从节点模块中使用它我应该如何在html文件中使用它？

如果我需要编辑less文件,我需要在节点模块中编辑吗？

5 个回答

安装为 npm install font-awesome --save-dev

在您的开发较少的文件中,您可以导入较少使用的整个字体@import "node_modules/font-awesome/less/font-awesome.less",或查看该文件并仅导入您需要的组件.我认为这是基本图标的最小值:
```
/* adjust path as needed */
@fa_path: "../node_modules/font-awesome/less";
@import "@{fa_path}/variables.less";
@import "@{fa_path}/mixins.less";
@import "@{fa_path}/path.less";
@import "@{fa_path}/core.less";
@import "@{fa_path}/icons.less";
```
作为一个注释,你仍然不会通过这样做来保存那么多字节.无论哪种方式,你最终都会包括2-3k行的无限制CSS.

您还需要从/fonts/公共目录中调用的文件夹中提供字体本身.您可以使用简单的gulp任务将它们复制到那里,例如:
```
gulp.task('fonts', function() {
  return gulp.src('node_modules/font-awesome/fonts/*')
    .pipe(gulp.dest('public/fonts'))
})
```
2023-01-30 19:24 回答

您必须设置正确的字体路径.例如

我-style.scss

$fa-font-path:"../node_modules/font-awesome/fonts";
@import "../node_modules/font-awesome/scss/font-awesome";
.icon-user {
  @extend .fa;
  @extend .fa-user;
}

2023-01-30 19:24 回答

青春梦敲门砖

您需要在构建过程中复制文件.例如,您可以使用npm postinstall脚本将文件复制到正确的目录:
```
"postinstall": "cp -R node_modules/font-awesome/fonts ./public/"
```
对于某些构建工具,有一些预先存在的字体很棒的软件包.例如,webpack有font-awesome-webpack,可以让你简单require('font-awesome-webpack').
2023-01-30 19:24 回答李波2602884584


                        
                在我的style.css文件中 

/* You can add global styles to this file, and also import other style files */

@import url('../node_modules/font-awesome/css/font-awesome.min.css');

        
                
                    2023-01-30 19:27  回答
                       0只0为0等0你0
                
            
                        
                使用expressjs，将其公开：

app.use('/stylesheets/fontawesome', express.static(__dirname + '/node_modules/@fortawesome/fontawesome-free/'));


您可以在以下位置看到它： yourdomain.com/stylesheets/fontawesome/css/all.min.css

        
                
                    2023-01-30 19:27  回答
                       k172ausoreor_878



    
    
        今天，你开发时遇到什么问题呢？
        立即提问
    

    
        热门标签