WEB制作(html・css(スタイルシート))に関する各種メモ書き:タグ「illustrator」での検索

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

■ 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/18 17:17

edit

Bootstrap
illustrator