1年後に差がつくFont Awesome5 ～フロントエンド開発(ES6,Webpack4,Babel7)への導入～ - Qiita
1年後に差がつくFont Awesome5 ～フロントエンド開発(ES6,Webpack4,Babel7)への導入～JavaScriptes6FontAwesomewebpackbabel 概要 Font Awesome(フォントオーサム)はFreeで使えるアイコン集で、このジャンルでほぼデファクトといって良い存在になっています。Free版とPro版がありますがFree版でも約1500種類のアイコンが使えます。 本稿では、node.js環境での開発を前提としたWebフロントエンド開発で Font Awesome5 を使う時のポイントを説明します。Font Awesomeはv5になってフロントエンド開発との連携機能が大幅強化され、お手軽にJavaScriptのバンドルにフォントを埋め込むことができます。 Font Awesomeのアイコンを使う（バンドルする）には以下の3ステップを踏みます。
Font Awesome 5がリリースされたぞ！ - Qiita
fontawesome.com (URLも従来の.ioから移転されました。) v4からのアップデートガイド(英語) 更新の概要 お金を払ってより多くのアイコンを手に入れることができる、Proバージョンができました。 無償版でも従来から比べてアイコン数が増え便利になりますが、ProではLightウェイト等の追加のアイコンを利用できます。 アイコンの数はもちろん増えました。 日本の開発者にとって最もうれしいアイコンはLINEのアイコン(fab line)ではないでしょうか。 導入方法が増えました。 JavaScriptとSVGによる描画が新たに追加されました。 ページをパースし、自動的に必要なCSSと<i>タグ内にsvgを挿入します。 もちろん、従来のCSSとWebFontを用いたバージョンでも可能です。 npmパッケージを用いれば、サーバー(node.js)サイドで事前にSVGを埋め込むこと
Using Font Awesome with WordPress — SitePoint
This article was originally published in February 2015, and was updated in 2018 to adjust the version, as well as other minor edits and additions. Web Icons Users arriving at a website are focused as much on the visual design of a website as they are on the content they are hoping to find there. Traditionally, designers and developers have used individual images/sprite-sheets for their icons; thes
Font Awesomeアイコンを素早く検索しコピー。Photoshopなどでの使い方 (PIXEL LAB)
いまやウェブ制作に欠かせない、Font Awesomeですが、500アイコン以上あるので、なかなか探すのも大変です。 公式サイトで、アイコンを検索できますが、あまり一覧性が高くないので、このページで、オリジナルのアイコン検索を作成しました。アイコン名から検索するほか、サイズを指定したり、回転したりと、アイコンをカスタマイズできます。 以上です。 ここから下は、Font Awesomeの基本的な使い方などについて紹介します。 Font Awesomeとは Font Awesomeは、500以上のアイコンが利用できる、オープンソースのアイコンフォント（ウェブフォント）です。 無料で利用でき、導入も非常に簡単です。ファイルをダウンロードしてサイトに組み込むこともできれば、CDNでも配信しているので、CDNのパスを取得して、ページに貼り付ければ、すぐに利用することもできます。Bootstrapとの
Movable Type の管理画面で Font Awesome を使おう | MTAppjQuery | かたつむりくんのWWW
Movable Type の管理画面をカスタマイズするとき、アイコンを使いたくなることってありませんか？ そういうときは MT 本体で使っているアイコンを使うというのがデザインの統一性を考えるとベストかも知れません。でも mt-static/images ディレクトリから探すは結構手間がかかります。また、フリーのアイコンを持ってきて使うという方法もありますが、それも少々面倒です。 そこで、今回は手軽に多数のアイコンを使える「Font Awesome」を MT の管理画面で使ってみようと思います。 Font Awesome を使う方法はいくつかありますが、今回は CDN を使うという最も手軽な方法にします。もちろん、MTAppjQuery がインストールされていることが前提となります。 さて、MTAppjQuery は、プラグインの設定に「自由テキストエリア」というのがあり、管理画面のソース
WebアイコンフォントFont AwesomeのSCSS版を使ってみる | DevelopersIO
画像作るのって面倒ですよね。最近はRetinaディスプレイの対応で解像度別に画像を作らなければならない機会もあると思います。個人的にはできるだけ画像は使いたくない。少し前に登場したWebアイコンフォントっていうテクニックがありますが、これを自作するのはかなり面倒です。そんなわけで少し前から話題になっていたWebアイコンフォントを詰め合わせたCSS「Font Awesome」を使ってみることにしました。 Webアイコンフォントを自作した時の記事も過去に書いているのでよければこちらもどうぞ。 【前編：フォント作成】アイコンをWebフォント化してリクエスト数の削減とRetina Displayに一発対応 【後編：Webフォント化】アイコンをWebフォント化してリクエスト数の削減とRetina Displayに一発対応 注意 今回は継承したり、Classを書き換えたりできるSCSS版を使ってみたい
「Font Awesome」をKeynoteやIllustratorで使う - outtakes
Keynote（やIllustrator）にFont Awesomeのアイコンを入れる場合、次の手順で行うのが最強です。 Font Awesomeから、フォントをダウンロードしてインストールする「Font Awesome.alfredworkflow」をダウンロードして、Alfred 2にインストールするAlfredを起動して「fa camera」のようにトリガーとなる語句を入れ、目当てのものが出てきたら、control+returnを押す フォント（やフォントサイズ、カラー）を設定する ruedapさん、ありがとう。 Font Awesomeのアイコンフォントを検索できるAlfred 2のWorkflowを作ってみた - アインシュタインの電話番号Font Awesome WorkflowがPhotoshopやIllustratorでもペースト可能に - アインシュタインの電話番号あと、
Font Awesomeのアイコンフォントを検索できるAlfred 2のWorkflowを作ってみた - アインシュタインの電話番号
ブログの再開が2年ぶりだったけど、作ってみたシリーズも同じく2年ぶり。お久しぶり。さて今回は、ものすっごくニッチなツールだけど、Font Awesomeを使ってる人でAlfredを使ってる人には喜んでもらえる気がする。イコール自分のことなんですけどね。 あのアイコンフォントのクラス名を全然覚えられなくて、アイコンの数も300個以上あって把握できなくなっていて、毎回Font Awesomeのサイトを開いて探すのも面倒なので、 Font Awesomeのアイコンをインクリメンタルサーチしてそのクラス名をペーストできる Alfred 2用のプラグインを作ってみた。 百聞は一見に如かず、どんなものかは以下のスクリーンキャストをご覧ください。 前から欲しいとは思ってたんだけど重い腰があがらなくて、でも先週、エンジニア界隈で人気のポッドキャストRebuild.fm #16を聴いていたら「Font Aw
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
アイコン読み込みがJavaScript+SVG描画に変わった「Font Awesome 5」に変更してみた