Итак, я прочитал и перепробовал почти все ответы о переполнении стека на первых 5 страницах Google, и я не могу понять, что на самом деле происходит.
Итак, это скриншот того, что показывает моя панель навигации. Как вы можете видеть, квадрат справа на самом деле должен быть , этот значок здесь . Если щелкнуть ссылку в блоге, она должна измениться на этот значок здесь . См. Скриншоты ниже для примеров.
Рабочий пример того, что я 'Пытаясь добиться этого, вы можете посетить эту ссылку здесь , которая находится непосредственно на StartBootstrap.com, который является живым демонстрационным шаблоном. За исключением случаев, когда демонстрационный сайт говорит «Страницы» вместо «Блог», как мой сайт. Вы можете найти полное GitHub Repo Здесь для шаблона.
Итак, я скопировал их код, я добавил Font Awesome через CDN, я добавил его с помощью их нового набораТег скрипта, я даже скачал его и включил папку /css/all.min.css и /webfonts на свой сайт, и он все еще не работает.
Вот мой код:
Sidebar.blade.php
<!-- Sidebar -->
<ul class="sidebar navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.html">
<i class="fas fa-fw fa-tachometer-alt"></i>
<span>Dashboard</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="pagesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fab fa-blogger-b"></i>
<span>Blog</span>
</a>
<div class="dropdown-menu" aria-labelledby="pagesDropdown">
{{-- <h6 class="dropdown-header">Login Screens:</h6> --}}
<a class="dropdown-item" href="#"><i class="far fa-newspaper"></i> Posts</a>
<a class="dropdown-item" href=""><i class="far fa-list-alt"></i> Categories</a>
{{-- <div class="dropdown-divider"></div> --}}
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<i class="fas fa-fw fa-chart-area"></i>
<span>Stuff</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="tables.html">
<i class="fas fa-fw fa-table"></i>
<span>Tables</span>
</a>
</li>
</ul>
Соответствующий CSS для боковой панели
.navbar-nav .form-inline .input-group {
width: 100%;
}
.navbar-nav .nav-item.active .nav-link {
color: #fff;
}
.navbar-nav .nav-item.dropdown .dropdown-toggle::after {
width: 1rem;
text-align: center;
float: right;
vertical-align: 0;
border: 0;
font-weight: 900;
content: '\f105';
font-family: 'Font Awesome 5 Solid' !important;
}
.navbar-nav .nav-item.dropdown.show .dropdown-toggle::after {
content: "\f107";
}
.navbar-nav .nav-item.dropdown.no-arrow .dropdown-toggle::after {
display: none;
}
.navbar-nav .nav-item .nav-link:focus {
outline: none;
}
.navbar-nav .nav-item .nav-link .badge {
position: absolute;
margin-left: 0.75rem;
top: 0.3rem;
font-weight: 400;
font-size: 0.5rem;
}
Этот веб-сайт разрабатывается в Laravel. Однако на самом деле это разработка пакетов Laravel, а не веб-приложение Laravel. Так что этот код вставлен в мой реальный сайт. Не то чтобы это могло иметь какое-либо значение.
Итак, что мне здесь не хватает?
Редактировать 1
Ссылочные ссылки, которые я пробовал:
FontAwesome значки не отображаются. Почему?
Шрифт Awesome не работает, значки отображаются в виде квадратов
Шрифт Awesome в псевдоэлементах CSS не отображается
Шрифт Awesome 5 на псевдоэлементах показывает квадрат вместо значка
Шрифт awesome не показывает значок
https://www.hanselman.com/blog/WhyDoMyFontAwesomeIconsShowUpAsBlankSquares.aspx
Редактировать 2
Я думаю, что это не повторяющийся вопрос, так как ответы на все остальные вопросы предложили выполнить некоторые из следующих действий, которые я сделал.
- Изменитьсемейство шрифтов для «Font Awesome 5 Free», «Font Awesome 5 Solid» и т. д.
- Возможно, вес шрифта равен 900, жирный, 400 и т. д.
- Включить Font Awesomeчерез CDN, прямая загрузка через страницу « Hosting Font-Awesome Yourself » и т. д.
- Попытка изменить псевдо с после на до.
Так что покаэто «дублирующий вопрос», ни один из ответов на один и тот же вопрос или тип вопроса не подходит для моего конкретного случая.
Я также добавляю ссылку на мое полное хранилище пакетов, как оно есть прямо сейчас , и также репозиторий веб-приложений Laravel .
Редактировать 3
Файл admin.css теперь корректен в репозитории GitHub, а соответствующий код начинается со строки 10626.