按钮没有图标答案

【问题标题】：Buttons don't have icons按钮没有图标
【发布时间】：2021-08-29 20:18:33
【问题描述】：

我的项目是在 laravel+bootstrap 上制作的。按钮没有图标，我不知道为什么。

我的 app.scss

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';
.table-buttons {
    text-align: right;
}
.table-buttons form {
    display: contents;
}

我的带按钮的刀片

<td class="table-buttons">
    <a href="{{ route('application_form.show', $application_form) }}" class="btn btn-success">
        <i class="fa fa-eye"></i>
    </a>
    @if (!(Auth::user()->id == 2))
        <a href="{{ route('application_form.edit', $application_form) }}" class="btn btn-primary">
            <i class="fa fa-edit"></i>
        </a>
        <form method="POST" action="{{ route('application_form.destroy', $application_form) }}">
            @method('DELETE')
            @csrf
            <button type="submit" class="btn btn-danger">
                <i class="fa fa-trash-alt"></i>
            </button>
    @endif
    </form>
</td>

当然，我使用了命令npm run dev。

我的布局刀片中的图标链接：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/fontawesome.min.css" integrity="undefined" crossorigin="anonymous">

【问题讨论】：

检查您的blade 是否设置不正确，您有@endif 和外部</form>，当它应该相反时......

标签： javascript laravel button icons bootstrap-ui

【解决方案1】：

使用 fontawsom v5，您必须注册并将给定脚本插入 DOM 以加载图标。 enter link description here

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/fontawesome.min.css" integrity="undefined" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/ee826a2333.js" crossorigin="anonymous"></script>


<button type="submit" class="btn btn-danger">
            <i class="fa fa-trash-alt"></i>
 </button>

【讨论】：

谢谢。我注册了。现在它可以工作了。

【解决方案2】：

您的 CDN 链接的完整性“未定义”。

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');


.table-buttons {
    text-align: right;
}
.table-buttons form {
    display: contents;
}

<!--CSS-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!--JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

<td class="table-buttons">
  <a href="javascript:void(0)" class="btn btn-success">
    <i class="fas fa-eye"></i>
  </a>
  <a href="javascript:void(0)" class="btn btn-primary">
    <i class="fas fa-edit"></i>
  </a>
</td>

【讨论】：