Семантический пользовательский интерфейс Icons-font not loading

Я создаю веб-сайт с использованием CSS-основы Semantic UI, и теперь я хочу использовать некоторые из его значков.

Вот HTML:

<h1>Title<i class="lab icon"></i></h1>

Я связал semantic.css, но я предполагаю, что мне нужно сделать что-то еще, чтобы заставить иконки работать? Я тоже пытался связать это:

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

Но это все еще не работает. Что мне не хватает?

Ответ 1

Копание в семантическом файле CSS показывает, что шрифты должны быть расположены здесь (относительно вашего semantic.css): themes/default/assets/fonts/

Источник: https://github.com/Semantic-Org/Semantic-UI/blob/master/dist/semantic.css#L5466-5467

Ответ 2

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title></title>


  <link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/css/semantic.min.css'>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/components/icon.min.css'>
  
  
</head>

<body>
  <h1>Icon Example</h1>
  <a class="item"><i class="alarm icon"></i>Notifications</a>
  <a class="item"><i class="mail outline icon"></i>Messages</a>

</body>

</html>

Ответ 3

Мое решение было довольно простым (однажды я его разработал). Я редактировал themes.config для использования моей новой (еще не созданной) темы. Как вы знаете, он возвращается к default, поэтому все, казалось, работает нормально.

/* Elements */
:
@flag       : 'supernewtheme';
@header     : 'supernewtheme';
@icon       : 'supernewtheme';
@image      : 'supernewtheme';
@input      : 'supernewtheme';
:

Несмотря на то, что консоль показала загрузку шрифтов Icons (нет 404), iti не работал. Я также проверил шрифт в моей папке build в правильном месте, это было.

Изменение темы до default для @icon выполнило трюк:

@icon       : 'default';

Ответ 4

Вам не нужно использовать font-awesome какой-либо другой библиотеки, попробуйте сначала cdn Official icon.min.css

<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/components/icon.min.css'>

иногда это не работает, поэтому вы можете перейти на официальную страницу semantic-ui, скачать zip-папку semantic ui и извлечь ее в папку компонентов, которую вы можете найти icon.min.css

включить этот файл в index.html

    <link rel="stylesheet" href="icon.min.css">

попробуйте отобразить значок Официальные документы

<i class="disabled users icon"></i>

НАСЛАЖДАТЬСЯ

Ответ 5

если кто-то использует электрон или любой другой JavaScript-фреймворк. Это может работать для вас. Иконка в электронике после правильной настройки семантики не показывалась. Ошибка не в семантической и не в загрузке. Ошибка с Фотоном и семантической комбинацией. Я использовал фотон с семантикой, чтобы мой интерфейс выглядел великолепно. Основное решение, которое я выбрал, ссылается на это официальное сообщение об ошибке. Кроме того, в моем пользовательском интерфейсе значок не отображался для раскрывающегося списка, поэтому я использовал консоль для решения, например,

.myclass .icon:before, .myclass.icon-before {
    font-family: 'dropdown';
}

Надеюсь, это поможет.