こんにちは、ながのです。
インターンシップ14日目です。今日もサイトのデザインパーツ作成をしています。Photoshopで作業をしていますが複数のパーツを加工するので、同じ効果を一日に何度も使います。そのたびに同じ操作を繰り返しているので、この作業をなんとかできないかが最近の悩みです。
直前に作業したものからコピーしようにも、レイヤーが増え過ぎていて探すのに時間がかかってしまいます。よく使うレイヤースタイルをまとめた素材ファイルを作っておけば作業が早くなるかなと思いますが、今からその作業をする時間もないので、他にいい方法が見つかればまたご報告します。
今日は昨日に続き便利なウェブフォントを使って、画像作成の手間を省いてアイコンを表示させよう！というテクニックをご紹介します。
目次
・アイコンのためのウェブフォント
・Font Awesomeを使ってみよう
・現在あるのは675種類
アイコンのためのウェブフォント
昨日ご紹介したGoogle Fonts以外にもウェブフォントがいろいろありますが、その中でもアイコンに特化した「Font Awesome」を使えば、アイコンをテキストとして表示させることができます。
今までだとIllustratorで作成したアイコンを、Photoshopで必要な形式の画像ファイルに保存して使用していました。その作業をせずに、必要なフォント一覧からコードをコピペすれば使うことができます。しかも文字なのでCSSで色やサイズの変更も可能です。画像ファイルじゃないので、その分の容量も軽減できますよね。
Font Awesomeを使ってみよう
ではさっそく使ってみましょう。使用する方法が２種類ありますが、より簡単な方をご紹介します。
htmlタグをコピペする
まず必要なhtmlタグをコピペします。このウェブフォントを使用するために準備されたCSSファイルをCDNサーバーから読み込むlinkタグです。タグはこちらからコピーします。
使いたいアイコンを選ぶ
次に使いたいアイコンをサイトから選んできます。選ぶのも大変ですね。選んだらそのアイコンをクリックします。
アイコンはiタグにclassをふることで使用できます。使いたいアイコンをクリックすると、そのアイコンに割り振られたclassを指定したhtmlタグが表示されます。
使いたい部分にこのタグをhtmlファイルにペーストすれば完了です。
cssで加工する
あくまでフォントなので、通常の文字と同じように色をつけたりサイズを変更することができます。色はcolorで、サイズも同様にfont用のcssで変更可能です。アイコンと文字を<ｐ>でくくり、ｐにまとめてスタイルを指定することも可能です。
google Fontsと合わせてサンプルを作ってみました。画像ファイルを1つも使わずにできるので、作業も早くすみますね。
現在あるのは675種類
675種類から選べるので、ウェブサイトで必要なアイコンはほぼそろっていると言えるくらいの数があります。ブランドアイコンとしてFacebookなどの大手サイトのロゴもアイコンとして用意されています。
変わったところでいうと、映画「スタートレック」に登場するスポックがするバルカンサリュートという手の形がありました。映画好きとしてちょっとテンションがあがりましたが、なかなか使いどころがなさそうですね。
class名もそのままスポックです。
こんなのあるの？！という掘り出し物のアイコンをぜひ見つけてみてください。
では本日もありがとうございました！