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-4.4.0 > fonts > FontAwesome.otf」
をインストール後
http://fortawesome.github.io/Font-Awesome/cheatsheet/
から好きなフォントをコピーしてから書体を「Font-Awesome」に変更する。
(書体変更前は文字化けしますがそれで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
02/12 17:33

edit

Bootstrap
illustrator