Foundationと同じく、ZURBが提供しているアイコンフォントを使って、連絡先を整えてみます。

アイコンフォントの設定

1. Foundation Icon Fonts 3のサイトを開きます。
http://zurb.com/playground/foundation-icon-fonts-3

2. 「Download the Font」をクリックし、「foundation-icons.zip」を任意の場所にダウンロードします。

3. zipファイルを解凍すると以下のファイルが展開されます。

.DS_Store
.fontcustom-data
foundation-icons.css
foundation-icons.eot
foundation-icons.svg
foundation-icons.ttf
foundation-icons.woff
preview.html
\svgs

（2016/04/02 更新 dist以下に直接アイコンフォントのファイルを置いていましたが、foundationを再起動すると消えてしまいました?!src以下に設置するように書き換えました。）

4. foundation-icons.cssを/src/assets/scssにコピーします。

5. /src/assets/以下に、fontディレクトリを作成し、残りのファイルをすべてfontディレクトリにコピーします。

6. 4.でコピーした、foundation-icons.cssの拡張子を.scssにします。foundation-icons.scssを編集します。5.でコピーしたフォントファイルへのパスを修正します。

/* 
 * Foundation Icons v 3.0
 * Made by ZURB 2013 http://zurb.com/playground/foundation-icon-fonts-3
 * MIT License
 */

@font-face {
  font-family: "foundation-icons";
  src: url("../font/foundation-icons.eot");
  src: url("../font/foundation-icons.eot?#iefix") format("embedded-opentype"),
       url("../font/foundation-icons.woff") format("woff"),
       url("../font/foundation-icons.ttf") format("truetype"),
       url("../font/foundation-icons.svg#fontcustom") format("svg");
  font-weight: normal;
  font-style: normal;
}

7. /src/assets/scss/app.scssに@importでfoundation-iconsを追記します。上書き用CSSの前がいいでしょう。

@include motion-ui-transitions;
@include motion-ui-animations;

@import 'foundation-icons';
@import 'overwrite';

8. 準備完了です。アイコンを挿入したい場所に、以下のコードを入れます。

<i class="fi-[icon]"></i>

fi-[icon]の[icon]の個所には、以下のページを参照してアイコンの横の文字を入れます。
http://zurb.com/playground/foundation-icon-fonts-3

もしくは、5.でコピーした中にあるpreview.htmlにもアイコン名があります。

実際に使ってみる

アイコンフォントを使って、連絡先を入れてみました。

header.html

<!-- header -->
<div class="header">
<div class="row">
  <div class="medium-6 columns">foundation-site template</div>
  <div class="medium-6 columns"><adress><span class="fi-telephone"> 000-0000-0000</span><br><span class="fi-mail"> mail@example.com</span></></adress></div>
</div>
</div>
<!-- /header -->

電話とメールアドレスは連絡先ということでadressタグで囲んでいます。

footer.html

<!-- footer -->
<div class="footer">
<div class="row">
  <div class="medium-6 columns"><small>&copy; foundation-site template</small></div>
  <div class="medium-6 columns">〒000-0000<br
>〇〇県△△市□□町0-0-0 ××ビル ××室</div>
</div>
</div>
<!-- /footer -->

footerのコピーライトは、html5の定義にしたがってsmallタグで囲みます。
アイコンフォントは・・・「〒」？
Foundation-iconには含まれませんが、日本が世界に誇るアイコンフォントですね。

完成形はご覧の通り。アイコンフォントなので、大きさはfont-sizeで変えられます。