WEB制作(html・css(スタイルシート))に関する各種メモ書き

illustratorやWEBサイトにCSS(WEBフォント)アイコンFont Awesomeを使う

● illustratorでFont Awesomeを使用する(Macの場合)

● 1. ダウンロードページからFont Awesomeをダウンロードする

https://fontawesome.com/download

Free for Desktop をクリックしてダウンロードします。
ダウンロードが完了したらダブルクリックして解凍しておきます。
fontawesome-free-5.9.0-desktop  のようなフォルダが生成されます。

● 2. Font Book.app を起動し「フォントを追加」から 先ほどダウンロードして解凍したフォルダを選択する

フォルダを選択すると自動的にフォントがインストールされます

● 3. フォント検索サイトからフォントコードをコピーする

https://glyphsearch.com/
こちらのサイトへ移動し、「Library → FontAwesome」 「 Copy → Unicode」を選択した状態でフォントをクリックすると自動的にコードがコピーされますので、それをテキストレイヤーヘペーストします。
文字化けしているような文字がコピーされてきますがそれでOKです。書体変更後にアイコンが表示されます。

● 4. Illustratorで 書体をFont Awesome 5 Free に選択する

これで文字化けしていた文字がアイコンに変わります。



● ホームページでFont Awesomeを使用する

http://fortawesome.github.io/Font-Awesome/

■ 使い方

  1. 「Font Awesome」のページから【Download】ボタンを押してダウンロード
  2. 解答してできたディレクトリの中から【css】【fonts】をサーバにコピー
  3. HTMLに以下を追加
    <link rel="stylesheet" href="./css/font-awesome.min.css">
    
  4. フォントの表示は以下のようにします。
    <i class="fa fa-cc-visa"></i>
    

■ アイコン一覧(アイコンをクリックすると貼り付け HTMLソースが見れます)

http://fortawesome.github.io/Font-Awesome/icons/

■ アニメーションさせることもできます(Font Awesome Animation)

http://l-lin.github.io/font-awesome-animation/

● Illustratorなどで Font Awesome のアイコンフォントを使用する

次の手順でできます。

1. フォントファイルを使用しているMacやWindowsにインストールする

フォントファイル
「font-awesome-4.4.0 > fonts > FontAwesome.otf」
をインストールします。

2. Illustratorの文字ツールで 「FontAwesome」を選択する

3. フォント検索サイトからフォントコードをコピーする

https://glyphsearch.com/
こちらのサイトへ移動し、「Library → FontAwesome」 「 Copy → Unicode」を選択した状態でフォントをクリックすると自動的にコードがコピーされますので、それをテキストレイヤーヘペーストします。
文字化けしているような文字がコピーされてきますがそれでOKです。書体変更後にアイコンが表示されます。

例■

メールアイコン を使用する場合は

  1. http://fortawesome.github.io/Font-Awesome/cheatsheet/ 画面から
    fa-envelope-o [&#xf003;] を探す
  2. ↑メールアイコン自体をコピー
  3. Illustratorの文字ツールでペースト
  4. 文字ツールでフォントを「Font-Awesome」に変更する。

よく使うアイコン : http://goo.gl/jTvmYC
参考 : http://goo.gl/Lhmm6P

関連エントリー

No.917
07/05 11:35

edit

Bootstrap
illustrator