web-dev-qa-db-ja.com

Zurb Foundationアイコンを設定するにはどうすればよいですか？

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>

Snapshot

csscss3iconszurb-foundationcss-frameworks
26
Beast_Code

基盤アイコンは<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; }
24
Todd

パックをダウンロードしたら、<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 で利用可能な他のバージョン

20
ManelPNavarro

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の例と同じ手法を使用してテンプレートで処理されます

5
ob1quixote

正しい方法は<i class="fi-star"></i> の代わりに <i class="ft-star"></i>

4
ManelPNavarro