Adobe XDでFontAwesomeを使う方法

この記事は何?

Adobe XDでFontAwesomeのアイコンを使用する方法は、

  • svgで張り付ける
  • プラグイン(Icons 4 Designなど)から貼り付ける
  • フォントとして読み込む

…などがあります。
今回はフォントとして読み込む方法をご紹介。

👇こんな感じでテキストでアイコンを読み込めます。

今回はVersion 5をインストールするよ

※v6(最新版)でも同じ手順で導入できます!

導入方法

1.Font Awesome ダウンロードページへ

Font Awesomeのダウンロードページへ。

Font Awesome ダウンロードページ

2.フォントをインストール

「Free For Desktop」をクリックするとzipファイルがダウンロードされるので、「otfs」を選択。

「otfs」を選択。

フォントを全てインストールします。

これで準備は完了!

あっというま!

Adobe XDで使用する方法

次にAdobe XDで使用する方法について紹介します。

1.アイコンをコピーしておく

まずはアイコンを探します。Font Awesomeのサイトへ行き、虫眼鏡アイコンをクリック。

今回はFont Awesome 5 Freeを使用するので検索バー横は「5.15.4」を選び、無料版にチェックを入れます。

英語で検索すると、候補が自動で出てきます。

cat と入力すると候補がでてくる

使用したいアイコンを見つけたらアイコンをクリックします。これでクリップボードにネコチャンがコピーされました。

ネコチャン

2.Adobe XDで使用する

Adobe XDを開きます。

テキストをCtrl + Vでペーストすると…

□になる…

コピペするだけだと、アイコン「□」が表示されます。フォントを変更する必要があります。
テキストのスタイルを「Font Awesome 5 Free」にします。

これで表示されました!!

コーダー向け XDの共有開発リンクからアイコンを確認する方法

※データがアウトライン化されていない場合の確認方法です。

コーディングするときにアイコン名が分からない…ってことになったのでメモ。

開発リンクだと□になってしまう

開発リンクで確認すると□が表示されてしまう…こういうときは「チートシート」から確認します。

1.コンテンツをコピー

要素を選択した状態でコンテンツをクリックしコピー

テキストをコピーする時と同じ手順でアイコンをコピーします。

2.サイト内検索で見つける

チートシートへ移動し、ctrl(macの場合cmd) + Fで検索ボックスを出してペースト。

でた!

アイコン名と疑似要素使用時の数字(f6d5)が分かりました!
solidアイコンなので.fas.fa-xxxになります。

<i class="fas fa-dragon"></i>
※ver6の場合は<i class="fa-solid fa-dragon"></i>

疑似要素で入れるときは

.xxxx:before{
  content: "\f6d5";
  font-family: "Font Awesome 5 Free";
.....
}

にしたらOK!

わーい
べんり

参考になったサイト