laravel - Laravel 7 不显示真棒字体图标
问题描述
我想在 laravel/Vue 项目中使用 Awesome 字体图标:
我安装了字体:
npm install font-awesome --save
添加到 resources/sass/app.scss 这一行:@import "node_modules/font-awesome/scss/font-awesome.scss";
npm 运行开发
我的布局文件的相关部分:
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
但是当我在我的 html 页面中使用任何很棒的图标时,例如
<i class="fa fa-copy"></i>
然后我找到了这个页面:https ://www.itsolutionstuff.com/post/how-to-install-and-use-font-awesome-icons-in-laravelexample.html 。我尝试添加该行
<link type="text/css" rel="stylesheet" href="{{ mix('css/app.css') }}">
到我的布局 html 文件的字体部分。但我仍然得到虚拟图标。
知道问题是什么吗?
问候,
休伯特
解决方案
您使用的是较旧的 Font Awesome 版本。
npm install @fortawesome/fontawesome-free
将以下内容添加到 resources/sass/app.scss:
// Font Awesome
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/brands';
最后,
npm run dev
推荐阅读
- python - pyodbc 查询没有结果
- firebase-realtime-database - 如何阻止使用 Firebase 作为后端的用户?
- asp.net - 从 aspx 视图中点击控制器方法
- c++ - 在构造函数初始化器列表中初始化 C++ 对象数组
- html - 有什么办法可以改变
在wordpress中标记?我认为滑块革命和购物车导致 SEO 问题
- html - 带有“厨房水槽”的 Bootstrap 卡片组件示例无法正常工作
- python - 通过 SFTP 连接到 PyCharm 中的部署服务器不起作用
- xml - XSL 在 foreach 循环中更改上下文节点
- c# - .asp 的 VSIX IViewTaggerProvider
- perl - 动态更改 Perl @ISA?