flaticon:10000種類以上のピクトグラムを無料で利用可能

サイト制作で便利なアイコン(ピクトグラム)の使い方です。

まず[flaticon](別ウインドー)のサイトにアクセスします。
「Categoly」や「Top Icon」を開き、欲しいアイコンを見つけたらクリック。

fla_1.jpg

さらに上部のダウンロードマークをさらにクリックします。

fla_2.jpg


以上の操作を繰り返した後、右上の「Download icons」をクリックし、私はWeb fontを使いたいので、さらに「webfont」をクリックします。

fla_3.jpg

圧縮ファイルを解凍するといくつかのファイルが出てくるので、以下のように「flaticon.html」の中でピクトグラムを使ってみることにしました。

fla_4.gif

ダウンロードしたピクトグラムの名前は「flaticon.html」をブラウザーで開くとわかります。
例えばチェックマークの「check30」というピクトグラムを使う時は、下記のようにクラスを指定するだけ。
タグでもOKです。

<body>
<i class="flaticon-check30"></i>
</body>
</html>

あっと言う間にピクトグラムが表示されました。

fla_5.gif

スタイルシートの「flaticon.css」で目的のピクトグラムのCSSをいじってあげると、色や大きさなどを変更出来ます。
Dreamweaverの「ライブ」モードでやれば、確認しながら変更出来ますね。

.flaticon-check30:before {
content: "\e000";
}

 ↓

.flaticon-check30:before {
content: "\e000";
font-size: 50px;
color: #F00;
}

fla_6.jpg

便利なものをありがとうございます!

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です