Webデザイン
はらちゃん
Googleマテリアルアイコンを自動作成!CSSのカスタマイズにも対応!
Material Icons(マテリアルアイコン)の自動作成ツールです。
マテリアルアイコンをCSSで自動カスタマイズできるように作成しました。
一覧からお好みのアイコンを選択できるようにし、さらに下記のカスタマイズ項目を用意しています。
カスタマイズ項目
- 色(14種類)
- サイズ(10種類)
- 反転(上下左右)
- 回転
選択したアイコンとカスタマイズ結果を即座にページ下部のプレビュー欄に表示し、コードも表示します。
アイコンの表示にはHTMLを使用しますが、カスタマイズ項目を利用する場合はCSSも使用するため、アイコンをカスタマイズする場合はCSSもご自身のサイトに貼り付けてください。
CSSのクラスは仮で【miCSS】としています。
マテリアルアイコン自動作成ツールの使い方
マテリアルアイコンを初めて使用される方は、使用方法を下記にまとめていますので、是非ご覧ください。
マテリアルアイコンの一覧
3d_rotation Action
add_alert Alert
add_to_queue AV
business Communication
add Content
add Device
attach_file Editor
attachment File
cast Hardware
add_a_photo Image
add_location Maps
apps Navigation
adb Notification
ac_unit Places
cake Social
check_box Toggle
マテリアルアイコンのカスタマイズ
カスタマイズ項目 |
カスタマイズ明細 |
色 |
|
サイズ |
|
反転 |
|
回転 |
|
HTMLコード
CSSコード
【Amazon】1,000円分のポイントがもらえる
キャンペーンを実施中!
皆さんが普段利用しているAmazonの支払い方法を現金に変更するだけで、1,000円分のポイントがもらえるキャンペーンを、現在Amazonが実施中です。
1,000円分のポイントに加え、最大2.5%の還元を受けられるサービスも同時に適用可能!
クレジットカードよりも遥かに還元率の良い購入方法で、お得にAmazonでお買い物しませんか?
コメントを残す