webpack之font-awesome

最新推荐文章于 2024-09-01 10:00:50 发布
转载 最新推荐文章于 2024-09-01 10:00:50 发布 · 340 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/mybky/p/7098452.html
文章标签：

#webpack #javascript #ViewUI

本文介绍了如何在项目中安装并配置Font-Awesome图标库，包括必要的依赖项如font-awesome-loader等。此外还提供了使用Pug模板引擎插入图标的示例代码。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1、安装font-awesome和font-awesome-loader及依赖

git：https://github.com/shakacode/font-awesome-loader

npm install font-awesome-loader less less-loader css-loader style-loader file-loader font-awesome -save

2、配置webpack

官方给出的webpack2.0配置如下：

但是实际上会出现如下错误：

解决办法：

3、使用（pug）

i(class='fa fa-comments' slot="icon" )

 

转载于:https://www.cnblogs.com/mybky/p/7098452.html

font-awesome使用方法
spcming的博客
09-23 1784
安装font-awesome，由于font-awesome没有什么依赖，所以安装最新版本即可 yarn add font-awesome 在webpack.config.js中进行如下配置 const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin') const ExtractTextPlugin = require('extract-text-webpack-plugin') mod.
解决vue项目使用font-awesome,build后路径的问题
12-03
问题： 项目在本地run情况下显示正常，在build后font-awesome的css文件依赖的几个图标文件引用路径报错。 在webpack.base.conf.js中关于几个文件的配置如下： { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('fonts/[name].[hash:7].[ext]') } } 解决： 通过和网上其他大神的配置对比上发现，有些webpack.base.conf.j
Webpack打包字体font-awesome的方法示例
08-27
本篇文章主要介绍了Webpack打包字体font-awesome的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Font-Awesome
11-05
font-awesome.
Webpack打包font-awesome
热门推荐
大雀儿飞飞的专栏
05-13 1万+
使用webpack构建font-awesome或者bootstrap的时候，最常见的一个问题就是构建字体文件的问题。经常会出现无法找到字体文件的问题。下面就讲一下如何正确构建引入字体文件： 1. 首先安装依赖: npm install style-loader css-loader file-loader font-awesome-webpack --save-dev 2. 在入口文件中引入f
File类、递归
weixin_51257719的博客
10-20 184
File类 一、概念 主要用于文件和目录的创建、查找和删除工作 二、构造方法 public File(String pathname) ：通过将给定的路径名字符串转换为抽象路径名来创建新的 File实例。 public File(String parent, String child) ：从父路径名字符串和子路径名字符串创建新的 File实例 public File(File parent, String child) ：从父抽象路径名和子路径名字符串创建新的 File实例。 代码示例： // 文件路径
electron-webpack-bootstrap-fontawesome-jquery:with使用Webpack，Bootstrap，FontAwesome和JQuery构建的示例电子应用程序
05-10
electronic-webpack-bootstrap-fontawesome-jquery :nerd_face: :laptop: 使用Webpack，Bootstrap，FontAwesome和JQuery构建的示例电子应用程序 在dev.to上查看完整的 ！
Cordova-PhoneGap-Babel-React-Hotloader-Webpack-Framework7-Firestore-FontAwesome：KitchensinkCordova-PhoneGap-Babel-React-Hotloader-Webpack-Framework7-Firestore-FontAwesome的样板
02-04
科尔多瓦的厨房水槽/样板-PhoneGap-Babel-React-Hotloader-Webpack-Framework7-Firestore-FontAwesome 具有原生外观的即用型混合移动应用程序的模板。 预习 安卓 的iOS 工具类 参见下文 编译为iOS和Android应用 ...
webpack 引入font-awesome 编译报错解决
weixin_33749242的博客
08-11 386
2019独角兽企业重金招聘Python工程师标准>>> ...
typescript webpack 导入 font-awesome
hongluk的专栏
08-20 463
1. 安装 npm install --save-dev @fortawesome/fontawesome-svg-core @fortawesome/free-brands-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/fontawesome-free 2.入口文件汇入 import '@fortawesome/fon...
14.如何解决使用webpack打包之后，font-awsome路径不对的问题，终极解决方法
kodmoqn的博客
08-13 129
14.如何解决使用webpack打包之后，font-awsome路径不对的问题，终极解决方法
webpack--引入字体
小毛贼_哪里逃
04-01 258
1 安装font-awesome字体：npm i -S font-awesome -S：把依赖安装到depandencies中 -D：安装到devDependencies中 { "name": "demo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "te...
webpack引入font-awesome出错误，提示eot字体类型出错。
wangchunbo的博客空间
01-31 8062
问题：webpack引入font-awesome出错误，log中的woff、ttf、svg格式的字体都没出错，只有eot出错了。 解决：url-loader中相关eot字体忘了配置了。 命令行的错误记录： extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-lo
Font Awesome Webpack 使用教程
gitblog_00789的博客
09-01 432
Font Awesome Webpack 使用教程 1. 项目的目录结构及介绍 font-awesome-webpack/ ├── LICENSE ├── README.md ├── package.json ├── src/ │ ├── font-awesome-webpack.js │ └── styles/ │ └── font-awesome.config.js ├──...
vue中使用font-awesome以及使用局域网访问网络
小楠子的博客
04-24 458
1.npm install less less-loader css-loader style-loader file-loader font-awesome --save 2.在main.js中全局注册font-awesome import ‘font-awesome/css/font-awesome.min.css’ 以上两步就可以在vue项目中使用font-awesome了 vue中使用局...
工程化中的依赖包的下载与配置
crazyFengGan的博客
07-02 611
swiper ...
【转载】在使用vue+webpack模版创建的项目中使用font-awesome
DemonL的专栏
12-21 424
1.安装依赖包 npm install font-awesome-loader less less-loader css-loader style-loader file-loader font-awesome -save 2.配置font-awesome-loader 打开项目目录build/webpack.base.conf配置font-awesome-loader如下： 开始...
webpack3解决font awesome找不到字体（webpack引入font awesome）
qssn的博客
05-10 1857
    看了N个网页都没解决，最后吧file loader的useRelativePath设置为true解决了。看了一下，该属性是生成一个相对 url ，难道之前打包的时候引入的都是绝对URL？这点求大佬指点。下面是引入font awesome的步骤。1.下载font awesome    这是废话。我用的是CSS2.引入font awesomeimport '../../font-awesome...
fonts/font-awesome-4.7.0/css/font-awesome.min.css
最新发布
05-26
### 关于 Font Awesome 4.7.0 的 `font-awesome.min.css` 文件路径及使用问题 Font Awesome 是一款广泛使用的图标字体库，其版本 4.7.0 提供了多种引入方式以适应不同的开发环境。以下是针对 `font-awesome.min.css` 文件的路径和常见使用问题的具体说明。 --- ### 1. **CDN 引入** 最简单的方式是通过 CDN 加载 `font-awesome.min.css` 文件。这种方式无需本地安装文件，适合快速测试或部署到生产环境中。 ```html <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> ``` 此链接指向的是官方维护的公共 CDN 地址[^2]，可以直接嵌入 HTML 文件头部 `<head>` 标签中。 --- ### 2. **Node.js/NPM 安装并引用** 虽然运行命令 `npm install --save font-awesome` 后并不会直接生成可立即使用的 CSS 文件路径[^1]，但可以通过以下步骤完成配置： #### （1）安装依赖 执行以下命令将 Font Awesome 添加至项目依赖项： ```bash npm install --save font-awesome ``` #### （2）构建工具集成（如 Webpack） 如果使用模块打包器（例如 Webpack），可以在入口 JavaScript 文件中导入样式表： ```javascript import 'font-awesome/css/font-awesome.min.css'; ``` 注意：确保项目的构建流程能够处理 CSS 导入操作，否则可能需要额外配置 loader 插件（如 css-loader 和 style-loader）。 #### （3）静态资源访问 对于某些框架（如 Vue CLI 或 Create React App），已内置支持 NPM 包内的静态资源加载机制。此时只需按上述方法导入即可生效。 --- ### 3. **手动下载与托管** 当网络状况不佳或希望完全控制资源时，可以选择从第三方源下载完整的 Font Awesome 压缩包[^3]。 #### 下载地址 前往 [GitCode 开放工具集](https://gitcode.com/open-source-toolkit/0a841)，获取压缩包 `font-awesome-4.7.0.zip`。 #### 托管步骤 解压后找到目录结构中的 `css/font-awesome.min.css` 文件，并将其放置在自己的服务器上。随后修改页面引用路径为例： ```html <link rel="stylesheet" href="/path/to/local/font-awesome.min.css"> ``` 这里的 `/path/to/local/` 应替换为你实际存储的位置。 --- ### 4. **常见问题排查** #### （1）图标无法正常显示 - 检查是否正确加载了 `font-awesome.min.css` 文件； - 确认 HTML 元素类名书写无误，例如： ```html <i class="fa fa-star"></i> ``` #### （2）跨域请求失败 如果是通过远程 URL 获取资源而遇到 CORS 错误，则考虑切换为本地副本或者调整服务端响应头设置允许外部站点调用。 #### （3）版本兼容性冲突 不同版本间 API 设计有所差异，请始终依据所选版本文档指导实施相应变更。 --- ### 结论 综上所述，无论是采用在线 CDN、前端工程化管理还是自行部署形式，都能顺利实现对 Font Awesome 图标的支持。根据个人偏好和技术栈特点选取最适合的一种方式进行实践吧！ ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值