web-dev-qa-db-ja.com

セマンティックUIでアイコンが表示されない

https://semantic-ui.com/introduction/getting-started.html のガイドを使用して、GulpでセマンティックUIを構築しています。

ただし、問題はアイコンが表示されないことです。したがって、<i class="facebook icon"></i>を使用しても、何も表示されません。

アイコンフォントなどはまだ作っていないようです。

Font Awesomeなどを自分でロードする必要がありますか？セマンティックUIのドキュメントを読みましたが、アイコンを有効にするために何かをしなければならないことを示す場所が見つかりません。

cssgulpiconsfont-awesomesemantic-ui
9
Jamgreen

Themes/default/assets/fonts /にあるフォントアセットを含めるように含める必要があります

themesフォルダーは、semantic.cssファイルと同じディレクトリにある必要があります。

フォントは、themesディレクトリ内のsemantic.cssファイルから外部にインポートされます。

このディレクトリを取得するには、 download ZipでセマンティックUIを取得し、distフォルダ内を確認します。

1
therewillbecode

2019年にはまだ回答済みとしてマークされていないので...明確な答えは次のとおりです。上記の答えも正しいですが、単純ではありません。

つまり、基本的に見逃したのは、アイコン自体が含まれていることです。 Semantic-uiをダウンロードすると、「dist」フォルダー内にthemesフォルダーが付属します。あなたがしなければならないことは、そのテーマフォルダをコピーして、あなたのsemantic-ui.cssが置かれているプロジェクトフォルダに貼り付けることです。そしてそれは動作します。

質問に回答済みのマークを付けることを忘れないでください。

0
Mosia Thabo

this link からicon.min.cssをダウンロードし、CDNリンクを次の2行に置き換えることで、これを部分的に修正しました。

    <link rel="stylesheet" href="~/Content/icon.min.css" />
    <link rel="stylesheet" href="~/Content/semantic.min.css"/>

まだいくつかのアイコンが欠落しています：輪郭が描かれているすべてのアイコン。 このブランチ からfontsフォルダーを試すこともできますが、うまくいきませんでした。

0
Emiliano Ruiz

同じ問題が発生し、webpack.mix.jsに次の行を追加して解決しました

  .copy('node_modules/semantic-ui-css/themes/default/assets/fonts/icons.woff','public/css/themes/default/assets/fonts/icons.woff')
  .copy('node_modules/semantic-ui-css/themes/default/assets/fonts/icons.woff2','public/css/themes/default/assets/fonts/icons.woff2')
  .copy('node_modules/semantic-ui-css/themes/default/assets/fonts/icons.ttf','public/css/themes/default/assets/fonts/icons.ttf')

次にコマンドを実行します

npm run dev

これは私の場合、私が必要とする不足しているファイルを追加します

0
Hector