技術ブログ | 株式会社クラウディア » フォント https://cloudear.jp/blog クラウド専門の業務システム・社内ツール開発 Fri, 12 Nov 2021 05:00:35 +0000 ja hourly 1 http://wordpress.org/?v=4.0.1 Font Awesome で簡単にアイコンを導入する https://cloudear.jp/blog/?p=1270 https://cloudear.jp/blog/?p=1270#comments Sun, 14 Jun 2015 12:10:53 +0000 https://cloudear.jp/blog/?p=1270 みなさんこんにちは、masa です。今日は CSS でアイコンを表現する Font Awesome (フォントオーサム) の使い方を紹介したいと思います。画像を使わないので、スマートフォン向けにも導入しやすいと思います。

fontawesome1

fontawesome4

 

ローカルで使う場合は上記公式サイトの Download から落として解凍してください。

サーバー上ですぐに使う場合は以下コマンドを実行して /css などお使いのディレクトリにファイルを入れてください。バージョンは新しくなっているかもしれないので、適宜バージョンの番号は変えてください。

# wget http://fortawesome.github.io/Font-Awesome/assets/font-awesome-4.3.0.zip
# unzip font-awesome-4.3.0.zip

 

fonts ディレクトリと css ファイルだけをドキュメントルートにコピーしてください。以下のような構成になっていれば問題ありません。

/var/www/html/fonts
/var/www/html/css/font-awesome.css
/var/www/html/css/font-awesome.min.css   //minファイルが不要であれば消してください

 

次は html ファイルの head タグで以下のようにしてください。

<head>
  <link rel="stylesheet" type="text/css" href="css/font-awesome.css">
  <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"> //不要なら消し(ry
</head>

 

これでアイコンフォントを使えるようになりました。早速使ってみましょう。基本的な使い方は タグの中の class に使いたいアイコンを書きます。

<i class="fa fa-twitter fa-lg"></i></a>

// fa は fontawesome のクラスを表す必須記述
// fa-twitter はアイコン名　ここに使いたいアイコン名を入れて使う
// fa-lg はアイコンのサイズ指定　サイズは以下の中から指定可能

なし  ：100%
fa-lg : 133%
fa-2x : 200%
fa-3x : 300%
fa-4x : 400%
fa-5x : 500%

 

上記サンプルだとこのようにツイッターのアイコンが出ました。
fontawesome3

その他のアイコンについては公式サイトのアイコン一覧を見て、指定してくださいね。

 

いかがでしたか？今日は画像を使わずにアイコンを導入できる Font Awesome の使い方をご紹介しました。2015年6月現在で 519個 のアイコンが使えます。アイコンフォントを提供しているサービスは他にもあるのですが、今のところ一番数が多いのはこの Font Awesome だと思います。みなさんも簡単に使えるアイコンフォントでサイトを飾ってみてくださいね。

]]> https://cloudear.jp/blog/?feed=rss2&p=1270 1 Illustrator & PhotoShop で Google Fonts を使う https://cloudear.jp/blog/?p=443 https://cloudear.jp/blog/?p=443#comments Sun, 04 Jan 2015 09:46:11 +0000 https://cloudear.jp/blog/?p=443 あけましておめでとうございます。新年みなさまどのようにお過ごしでしょうか？
さて、今回は Google Fonts をウェブフォントとして使う、ではなく Google Fonts を PC にインストールしてイラレやフォトショから使う方法です。

Google Fonts というと、無料で商用利用もできるウェブフォントで、使いたいフォントを探して HTML のメタに URL を貼り付けて、font-family から読み出すというのが本来の使い方。
これだけではなくそのフォントを自分の PC にインストールすることも出来るので、ロゴを作るデザイナーさんにとってもありがたいサービスなんです。

 

「なんだって！？オイラはいつでも明朝体で勝負でぇ！」という粋な日本男児は読み飛ばしてください。

 

さて、早速 Google Fonts からイケてるフォントをダウンロードする手順をば

gf1

 

どのフォントでもいいですが、今回は「geo」で検索します。
ちなみにゲオではなくジオだと思います´･∀･)　↓

gf2

 

 

次は「GEO」の中でダウンロードしたい字体の「Add Collection」をクリックします。↓

gf3

 

次に真ん中の小さいボタンをクリックします。↓

gf4

 

 

字体を選んで、下矢印のボタンをクリックします。↓

gf5

 

ウインドウが出ますので、一番上の文章の「zip file」をクリックするとダウンロードが開始されます。↓

gf6

 

あとはファイルを解凍して、インストールしたい .ttf ファイルをダブルクリックするだけです。
ちなみに regular に対して、 oblique は斜め字体のことです。

gf7

 

では今回は Illustrator CC から使ってみましょう。↓

gf8

 

ＧＥＯ フォントはうちのブログロゴで使っています。ポップで角ばったフォントで、個人的によく使うフォントのひとつです。ひとつ注意点ですが  GoogleFonts は日本語はありません(ﾉД`)　あぁ・・・無数の漢字がある日本語の切なさよ。

 

いかがでしたか？
今日はデザイン関連の記事でした。これだけの数のフォントが無料で使えるとはありがたいですよね。みなさんもお気に入りのフォントを見つけて、イケてるデザインを制作してください。

]]> https://cloudear.jp/blog/?feed=rss2&p=443 0