Zurb Foundationアイコンフォントファイルをダウンロードしました http://zurb.com/playground/foundation-icon-fonts-
それらを解凍し、/ foundation-iconsフォルダーを/ cssフォルダーに配置しました。これは正しいです?ドキュメントの「使用方法」セクションを参照しようとしていますが、クラスの使用を開始する方法がわかりません。
これをクラスを呼び出すために.htmlで実行しています。
<a class=".fi-social-facebook">Facebook</a>
だから、私は自分のファイルフォントを適切に設定/設定してはならないと思います。
Update:これは私のディレクトリがどのように見えるかです...私はそれを参照しています
これがクラスの呼び方です。
<i class="ft-social-facebook"></i><a href="#">Facebook</a>
<i class="ft-star"></i>
基盤アイコンは<i>
タグ。したがって、<i class="fi-social-facebook"></i><a href="http://facebook.com">Facebook</a>
。
ダウンロードしたZipにはpreview.htmlファイルがあります。エディターで開いて、目を通してください。それはもう少し理にかなっています。
また、CSSファイルにはサイズが含まれていません。そのため、例を使用してサイズを変更すると(例:<i class="fi-calendar size-24"></i>
)、何も変わりません。 preview.htmlファイルを見ると、ヘッダーでそれらのサイズが定義されていました。そこで、それらをコピーしてCSSに入れ、問題を解決しました。使用したい場合は次のとおりです。
.size-12 { font-size: 12px; }
.size-14 { font-size: 14px; }
.size-16 { font-size: 16px; }
.size-18 { font-size: 18px; }
.size-21 { font-size: 21px; }
.size-24 { font-size: 24px; }
.size-36 { font-size: 36px; }
.size-48 { font-size: 48px; }
.size-60 { font-size: 60px; }
.size-72 { font-size: 72px; }
パックをダウンロードしたら、<head>
に追加する必要があります。
<link rel="stylesheet" href="css/foundation-icons.css" />
svgs
フォルダー内のcss
フォルダー、およびcss
フォルダー内の残りのファイルも確認してください。
この設定が完了したら、htmlでこれを試してください。
<i class="fi-star"></i>
星が印刷されるはずです。
最速のソリューション、インストール不要:
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css"/>
https://cdnjs.com/libraries/foundicons で利用可能な他のバージョン
pip install Django-zurb-foundation
を介してインストールし、同じ問題…/foundation/icons
が発生していましたが、実際のプロジェクトでは参照できませんでした。私のために働いたのは、私のプロジェクトのbase.html
に以下を追加することです
{% load foundation_tags %}
{% block css %}
{% foundation_css 'foundation-icons' %}
{% endblock css %}
ManelMusti の答えと事実上同じですが、…/site_packages/foundation/templates/foundation/icons.html
の例と同じ手法を使用してテンプレートで処理されます
正しい方法は<i class="fi-star"></i>
の代わりに <i class="ft-star"></i>