概要
- UIフレームワークのIonic(アイオニック)のフォントアイコンは魅力的
- でも今回はIonic Frameworkは使わずに、生のAngularフレームワークのみとかでIonicのフォントアイコンを使いたい、、、
という方向けのTips。
Ionicのicon fontのみを用意してくれているioniconsがあり、これを利用すればIonicのアイコンも簡単に利用できます。今回は既存Angularプロジェクトに入れるパターンを想定。方法1はAngular以外でもそのまま転用できます。
環境
- Angular2以上のお話(1系のAngularJSではない)
- Angularのバージョン 5.2.7
(Nodeのバージョン 6.11.4)
[方法1] CDNで持ってくる
これはAngularの使用の有無に関係なく利用できる
タグ内に埋め込むだけの方法です。Angularの場合は、index.htmlののタグ内に、以下のコードを埋め込めば導入できます。
<link rel="stylesheet” href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
[参考] httpで取得したい場合は以下のURLで指定するhttp://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css
[方法2] npmでインストール
angular-cliを利用している前提。
手順1
以下のコマンドでnpm install。
npm install ionicons@'2.0.1' --save
手順2
Angularプロジェクトの".angular-cli.json"のstylesのところに、"../node_modules/ionicons/scss/ionicons.scss"を追加
"styles": [
...,
"../node_modules/ionicons/scss/ionicons.scss"
],
確認
方法1もしくは方法2で導入が終わったら、導入が無事できているかを確認します。html側の追加やCSS側の追加などいくつか方法はありますが、今回はhtml側でclassを追加する方法で確かめます。
任意のcomponentのTemplateファイルで以下のコードを追加します。
<i class="ion-social-angular"></i>
追加した部分に、Angularのアイコンが表示されていれば導入は成功です。
参考
ionicons
http://ionicons.com で、使いたいアイコンをクリックすると、Class名が出てくるので、それを上記のように、classに記述すればOK。