2014-01-18 60 views
14

セマンティックUI CSSフレームワークを使用してウェブサイトを構築していますが、今ではいくつかのアイコンを使いたいと思います。ここで セマンティックUIアイコン - フォントがロードされない

はHTMLです:私はsemantic.cssをリンクされている

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

が、私は私が働いてアイコンを取得するには、あまりにも何かを行う必要があると仮定しますか?私もこれをリンクしようとしました:

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

しかし、それでも動作しません。私は何が欠けていますか?セマンティックCSSファイルに掘る

答えて

17

は、フォントが(あなたのsemantic.cssに対して)ここで位置する必要があることを明らかに:themes/default/assets/fonts/

出典: https://github.com/Semantic-Org/Semantic-UI/blob/master/dist/semantic.css#L5466-5467

+2

ない:​​のために戻っdefaultにテーマを変更

はトリックをしました。 semantic.min.cssと並行しています。それ以外の場合は、外部スタイルシートを使用してフォントフォルダのパスを変更することもできます。 – iMatoria

+0

あなたは正しいです。私は答えを更新しました。 – fgblomqvist

+0

@fgblomqvistデッドリンク、回答を更新してください – user3574492

5

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

+0

あなたの例を '2.2.13'バージョンに更新すると、idカードのような多くのアイコンが表示されます。 – Stephane

0

(私はそれを働いたら)私のソリューションは非常に簡単でした。私はthemes.configを編集して、新しい(まだビルドされていない)テーマを使用しました。あなたが知っているように、それはdefaultに落ちるので、すべてがうまくいくように見えました。

コンソールにIconsフォントの読み込み(404なし)が表示されても、itiは機能しませんでした。私はまた、フォントが正しい場所に私のbuildフォルダにあったことを確認した、それはあった。正確

@icon  : 'default'; 
関連する問題