ionic でサードパーティ iconfont を使用する方法

一。問題の再述

ionic 公式は多くのアイコン（ion-xx）を提供していますが、それでも足りず、多くのアイコンが見つかりません（微信/QQ/QR コード/揺らす...）

もちろん、従来の方法に従えば、オープンソースアイコンライブラリから探すことができます。例えばIconfont-阿里巴巴矢量图标库

見つけた後、サードパーティ iconfont を ionic にインポートして、テンプレートファイルで使用するにはどうすればよいでしょうか？

二。解決策

###1.iconfont の導入方法

ionic の lib フォルダを確認するとわかります：

lib\ionic\fonts フォントファイル
lib\ionic\css   スタイルファイル

スタイルファイル ionic.css には iconfont が定義されています：

@font-face {
    font-family: "Ionicons";
    src: url("../fonts/ionicons.eot?v=2.0.1");
    src: url("../fonts/ionicons.eot?v=2.0.1#iefix") format("embedded-opentype"), url("../fonts/ionicons.ttf?v=2.0.1") format("truetype"), url("../fonts/ionicons.woff?v=2.0.1") format("woff"), url("../fonts/ionicons.woff") format("woff"), url("../fonts/ionicons.svg?v=2.0.1#Ionicons") format("svg");
    font-weight: normal;
    font-style: normal;
}
/*...*/
.ion-alert:before {
    content: "\f101";
}
.ion-alert-circled:before {
    content: "\f100";
}
.ion-android-add:before {
    content: "\f2c7";
}
/*...*/

iconfont の参照方法は私たちが知っているものと同じで、特別なことはありません。このような方法でカスタム iconfont を導入することもできます

注意：lib を修正しないでください。他人のものを勝手に変更するのは良くありません

###2.具体的な操作

www ディレクトリ下に font フォルダを新規作成し、ttf, woff, eot, svg をすべて入れ、然后在我们自己的 www/css/style.css でフォントファイルを導入します：

@font-face {font-family: 'iconfont';
    src: url('../font/iconfont.eot'); /* IE9*/
    src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../font/iconfont.woff') format('woff'), /* chrome、firefox */
    url('../font/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('../font/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
/*!!! このクラス名は icon でなければなりません*/
.icon{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}

特に注意：フォント効果を設定する css クラスは必ずicon という名前にする必要があります。後で理由を説明します

然后就可以在模版 html 中使用这些图标了，但还会遇到一些问题，比如：

[caption id="attachment_855" align="alignnone" width="302"] 设置 ion-tab 的 icon-on/off[/caption]

上図は ion-tab ディレクティブでカスタムアイコンを使用しているもので、フォント効果クラスを icon と命名するのは、類似のディレクティ��で直接使用できるようにするためです。例えば：

<ion-tab title="通讯录" icon-on="icon-tongxunlu" icon-off="icon-tongxunluxianxing" href="#/root/contacts">
    <ion-nav-view name="tab-contacts"></ion-nav-view>
</ion-tab>

ionic は上記のディレクティブを自動処理し、a>i+span のような構造を生成します。アイコンは i タグを通じて表示されます：

<i class="icon icon-tongxunluxianxing" ng-if="getIconOff() &amp;&amp; !isTabActive()"></i>

ここで i タグは自動的に icon クラスのみを持ち、icon ではない名前のスタイルクラスは適用されません

P.S.ion-tab にclass="my-icon" を追加することを簡単に考えつきますが、残念ながら、生成された i タグにはclass="my-icon" がありません。抵抗は無効なので、素直にクラス名を icon に変更しましょう

###3.遭遇する可能性のある其它問題

1. アイコンのサイズ（寸法）をどのように調整するか

ionic の icon のデフォルトfont-size は 32px ですが、サードパーティフォントの初期サイズは統一されておらず、同じfont-size でも異なるサイズが表示されます。対応するアイコンの before を修正できます。例えば：

    .icon-tongxunluxianxing:before { content: "\e6bf"; font-size: 27px;}

このフォントの 27px は ion-xx の 32px の幅と高さとほぼ同じで、肉眼で微調整できます

2. アイコンの垂直中央揃えをどのように制御するか

これは深刻な問題で、font-size を修正した後、アイコンが垂直方向に中央揃えされなくなります。カスタムアイコンにline-height: 1 を適用する必要があります。例えば：

    .icon:before {
        line-height: 1;
    }

この文は ionic スタイルから見つけたもので、理論上奇妙な副作用はなく、line-height: 100%、line-height: 32px; よりも安全です

3. アイコンの位置をどのように微調整するか

line-height を設定してもまだ中央揃えできないことがわかります。これは科学的で、フォント作成時に svg 画像自体が中心からずれている可能性があるためです。したがって偶然にこの状況に遭遇し、relative で微調整する必要があります：

    .icon-faxian:before { content: "\e607"; font-size: 20px; position: relative; top: 3px;}

左右が合わない場合はleft/right を微調整できます

4. アイコンをどのように組み合わせるか（badge に類似）

アイコンの隅に小さな赤い点を追加したい場合（badge の効果に類似）、こうできます：

    /* 右下隅 */
    .icon-badge-rb:before {
        font-size: 16px;
        position: relative;
        bottom: -2px;
    }

テンプレートファイルでこのように使用します：

    <i class="icon ion-ios-person positive">
        <span class="icon icon-badge-rb ion-ios-checkmark-outline"></span>
    </i>

効果は下図の通り：

[caption id="attachment_856" align="alignnone" width="301"] 微信の連絡帳を模倣[/caption]

三。まとめ

ionic はレイアウト詳細の制御においてあまり便利ではありません（粗いフレームワークの構築は速い）。使用する際に追加のツールスタイルが必要になる可能性があります。例えば：

.mt10 {
    margin-top: 10px;
}

.fz-sm {
    /*デフォルト 16px*/
    font-size: 14px;
}

.icon-sm:before {
    font-size: 20px;
}

少し複雑なレイアウトは grid で実装するのは不便ですが、float/relative などで素早く実装できるため、ツールスタイルを自备することは依然として必要です