XAMPP配置多端口导致的图标字体不显示-php教程-PHP中文网

Font Awesome 路径 404 是因 Apache 端口改为 8080 后，前端资源 URL 仍硬编码为 http://localhost（端口 80），导致字体请求发往错误地址；需同步更新 HTML 中 link 地址、Laravel 的 APP_URL、Mix 的 publicPath 及 Apache MIME 类型配置。

xampp配置多端口导致的图标字体不显示

Font Awesome 路径 404 是因为 Apache 端口改了但资源路径没更新

改了 httpd.conf 里的 Listen 8080 和 ServerName localhost:8080，但前端引用的 Font Awesome CSS 或字体文件仍走默认 http://localhost/（即端口 80），浏览器发请求时被拒绝或返回 404。这不是 Font Awesome 本身的问题，是资源 URL 和实际服务端口不匹配。

常见表现：GET http://localhost/fonts/fa-solid-900.woff2 net::ERR_CONNECTION_REFUSED 或状态码 404；控制台看到字体请求地址里没有端口号。

检查所有 HTML 中的 <link rel="stylesheet"> 和 JS 动态插入的样式表 URL，确认是否硬编码了 http://localhost/
Laravel 项目中若用 mix() 或 asset()，确保 APP_URL 配置为 http://localhost:8080（不是 http://localhost）
静态引入 CDN 版本时不受影响，但本地托管的字体文件（如放在 public/fonts/）必须通过正确端口访问

Laravel Mix 编译后字体路径错乱的典型原因

在 XAMPP 下运行 npm run dev 或 npm run build 后，mix() 生成的 CSS 里字体路径仍指向 /fonts/...，而 XAMPP 的 DocumentRoot 是 \xampp\htdocs\，但 Laravel 项目通常放在子目录如 \xampp\htdocs\myapp\ —— 这导致浏览器按根路径请求字体，实际却要从子目录下找。

根本问题：Laravel Mix 默认假设应用部署在域名根路径，没考虑 XAMPP 子目录结构。

在 webpack.mix.js 中显式设置 mix.setPublicPath('public') 不够，还需配置 mix.webpackConfig({ output: { publicPath: '/myapp/public/' } })（把 myapp 换成你的项目文件夹名）
或者更稳妥：用 php artisan serve --port=8080 替代 XAMPP 运行 Laravel，避开路径歧义
若坚持用 XAMPP，CSS 中的 @font-face 的 src 必须是相对路径（如 ../fonts/fa-solid-900.woff2），不能是绝对路径 /fonts/...

Apache 虚拟主机配置遗漏导致字体跨域或 403

启用多端口后，如果还配了 <virtualhost></virtualhost>，但没给字体文件类型加 MIME 支持，Apache 默认拒绝提供 .woff、.woff2 文件，返回 403 或空响应。

XAMPP 8.0.30

XAMPP 8.0.30 是一款免费、开源的跨平台 Web 服务器集成包，专为快速搭建本地 PHP 开发环境而设计。该版本核心组件包括：Apache 2.4.56、MySQL 8.0.33、PHP 8.0.30、phpMyAdmin 5.2.1 等。它支持 Windows、Linux 和 macOS 系统，可让开发者在个人电脑上轻松模拟服务器环境，无需复杂配置即可运行 WordPress、Thin

下载

错误现象：字体请求返回 403 Forbidden，或 Network 面板显示 MIME type 为 text/html 而非 font/woff2。

编辑 \xampp\apache\conf\extra\httpd-vhosts.conf，在对应 <virtualhost></virtualhost> 块内加入：

<ifmodule mod_mime.c>
    AddType font/woff2 .woff2
    AddType font/woff .woff
    AddType font/ttf .ttf
</ifmodule>

同时确认 \xampp\apache\conf\httpd.conf 中 LoadModule mime_module modules/mod_mime.so 未被注释
重启 Apache 生效

Windows hosts 文件与本地域名混淆引发的字体加载失败

有人为多项目配了 mysite.local 域名并改了 hosts，但 Font Awesome 的 CSS 里写了 url(//fonts.googleapis.com/...) 或本地路径用了 http://mysite.local/fonts/...，而浏览器实际访问的是 http://localhost:8080 —— 域名不一致触发 CORS 或路径解析失败。

最隐蔽的坑：CSS 里写的是 url(/fonts/fa-brands-400.woff2)，但页面在 http://mysite.local:8080 下打开，而 Apache 只监听了 localhost:8080，导致字体请求发向 http://mysite.local:8080/fonts/... 却没匹配到任何虚拟主机规则。

统一用 localhost:8080 访问，别混用自定义域名，除非你确认所有 <virtualhost></virtualhost> 都已正确定义且 hosts 解析无误
检查浏览器 Network 面板，点开字体请求的 Initiator 列，看是哪个 CSS 文件、哪一行触发的请求，再顺藤摸瓜查路径拼写
临时把 Font Awesome 改成 CDN 引入（如 https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css），快速验证是否纯属本地路径问题

XAMPP 多端口本身不破坏字体，但会放大路径、域名、MIME 配置的微小偏差；真正卡住人的往往是一处 publicPath 写错，或一个 AddType 漏掉，而不是“图标不兼容 XAMPP”。