web-dev-qa-db-ja.com

セマンティックUIアイコン-フォントが読み込まれない

セマンティックUI CSSフレームワークを使用してWebサイトを構築していますが、そのアイコンのいくつかを使用したいと思います。

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">

しかし、それでも機能しません。何が欠けていますか？

htmlcssfont-awesomesemantic-ui
17
fgblomqvist

セマンティックCSSファイルを掘り下げると、フォントを（semantic.cssに対して）ここに配置する必要があることがわかります：themes/default/assets/fonts/

ソース： https://github.com/Semantic-Org/Semantic-UI/blob/master/dist/semantic.css#L5466-5467

23
fgblomqvist
<!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>

上記のスニペットをご覧ください。他の同様の問題については、以下のリンクを使用することもできます。

https://cdnjs.com/libraries/semantic-ui

11
David Charles

他のライブラリの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公式ページ semantic ui Zipフォルダーをダウンロードし、コンポーネントフォルダーに抽出するicon.min .css

そのファイルをindex.htmlに含めます

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

それらのアイコンを表示してみてください 公式ドキュメント

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

[〜＃〜]楽しむ[〜＃〜]

3
MD SHAYON

誰かがelectronまたは他のJavaScriptフレームワークを使用している場合。これはあなたのために働くかもしれません。セマンティックを適切に設定した後の電子のアイコンが表示されませんでした。エラーはセマンティックでもロードでもありません。エラーはフォトンとセマンティックの組み合わせにあります。フォトンをセマンティックで使用して、UIを美しく見せました。私が選択した基本的な解決策は、 this 公式のエラー報告に関するものです。また、UIのアイコンがドロップダウンに表示されなかったので、コンソールを使用して次のように解決しました

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

それが役に立てば幸い。

0
Muhammad Hassaan Bin Tanveer

私の解決策は非常にシンプルでした（一度解決したら）。新しい（まだビルドされていない）テーマを使用するようにthemes.configを編集しました。ご存知のように、それはdefaultにフォールバックするため、すべてが正常に機能しているように見えました。

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

コンソールにアイコンフォントの読み込み（404なし）が表示されても、itiは機能しませんでした。また、フォントが正しい場所のbuildフォルダにあることも確認しました。

@iconのテーマをdefaultに戻すと、うまくいきました：

@icon       : 'default';
0
Ed Henderson