WEBサイト制作効率化のための、
デザイン・wordpressの試作や覚え書き

その他

WEBアイコンや記号・マークをカンタンに表示させたい!

2019-08-11

読みやすさのためにアイコンを使いたいな、でも作るのに時間がかかるし…。そんな時に、商用OKのフリーアイコンはとっても便利です!

Webアイコンフォント Font Awesome

STEP1

head 内に下記を記述して読み込みます。CDN(Web上に公開されているファイル)なので自分のサーバーにファイルをアップしなくても使用可能です。

STEP2

使用したいアイコンを一覧から検索して、記述されているコードをコピーして貼り付けます。

注意

cssに疑似要素で設定する際は、タイプをfont-weightで設定します。Solidタイプの表示にはfont-weight: 900;を、Regularタイプ、Brandsタイプの表示にはfont-weight: 400;を記述すること。ブランドアイコンを使うときは、font-family名を”Font Awesome 5 Brands”とすること。

おまけ よく使う特殊文字

スペース

(cssで空白を作るほうが、調整可能で環境の影響が小さいため推奨されているようです。)

その他

-その他

関連記事

画像を一括変換させたい

photoshopの自動処理「バッチ」は、複数の画像を自動で一括処理できる便利な機能です。例えば画像100枚をRGBからCMYKへ変換するだけでも、1枚ずつ行えば結構時間がかかりますね。それを、バッチ処理ならアクションを登録するだけ。後は自動で仕上げてくれます。

どのリンクから訪問された?パラメータで流入元を把握しよう!

自分のサイトへアクセスしてくれた、その流入元がどこなのか知りたい!リスティング広告? FaceBook? 自然検索?その他、考えられる経路はたくさんあります。メルマガ、LINE、アプリ、QRコード、ア …

サイトに訪れていただきありがとうございます!このブログでは、調べたこと、試したことを次回スムーズに行うための覚え書きをアップしています。普段は埼玉のWeb制作会社に勤務しています。