LoginSignup
0
0

More than 3 years have passed since last update.

primengのドロイド君iconを使いたい

Posted at

image.png

色違いのドロイドがあらわれたっ!

意外に苦戦しました(笑)

まずは
npm install primeicons --save
モジュール取ってきます。

class="pi pi-android"
app.component.htmlに埋め込みます。
(※本当はiディレクティブで囲みますがqiitaに直接html文書けなくなったようなので
省いてます。https://www.primefaces.org/primeng/#/icons)

@import '~primeicons/primeicons.css';
styles.cssに書きます。

.pi {
font-family: 'primeicons';
font-style: normal;
color: blue; //追記
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
display: inline-block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 500px; //追記
}

node_modules下にnpm installで生成されたprimeicons.cssに書き込みます。
デフォルトだとかなり小さく、色も黒なので追記しました。

今回つまずいたのがindex.htmlに書くのかangular.jsonに書くのかとかそこらへんで
す。classって書いているのでcssで設定するのはそりゃそっかって終わってみてなりました。

実務では改修メインだから0から作るってまた難易度が段違い。しかし楽しい!

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0