Axure アイコン solution_html/css_WEB-ITnose

部品ライブラリの方法

一般的な方法は、インターネット上で共有されている部品ライブラリを使用することです。最も完全なものは、Xiaolou 先生の部品ライブラリです。

ただし、この種のコンポーネントライブラリのアイコンは通常、現在のプロトタイプのトーンと異なる場合は使用できません。さらに、アイコンは状態を表すことが多く、状態ごとに異なる色が必要となるため、プロトタイプのアイコンとして画像を使用するのは適切ではありません。

Font CION メソッド

その後、フォントアイコンが実際にはテキストであることを発見しました。テキストの色とサイズを変更するのに非常に便利です。

フォント名：FontAwesome

FontAwesomeフォントダウンロードリンク：http://yunpan.cn/cytakifcnYz6j (抽出コード：fa4d)

FontAwesomeフォントコンポーネントライブラリ：http://yunpan.cn/cyXw7JszvyPmh (抽出コード：53db)

1. フォントのインストール

a. フォントをダウンロードした後、ファイルを解凍し、フォント フォルダーを選択します

b. フォント ファイルをダブルクリックして、フォントのインストール ページに移動します

c . 中

D. インストールが成功したら、Axure フォントで FontaWesome を選択できます

しかし、使用してみると、使い方が分かりませんでした。このようなアイコンを作成するにはどうすればよいですか?現時点では、FontAwesome の公式 Web サイトで 1 つずつ検索し、見つかったらコピーして貼り付けることもできます。しかし効率は低いです。この際、フォントを1つずつ分割してコンポーネント化したので、非常に使いやすくなりました。フォント コンポーネント ライブラリのダウンロード リンクは上の図に示されています。インストール方法について説明します

a. コンポーネント ライブラリをロードし、[コンポーネント ライブラリを組み込む] を選択します

b. ダウンロードした RPLIB ファイルを見つけてインストールします

全 C. 使用する場合は、all/fontawesome コンポーネント ライブラリを選択してください

なら、直接使用できます。フォントのサイズや色などを自由に変更します。 プロトタイピング後、CSS スタイルをリンクします

プロトタイピングが完了したら、他の人に見せるときです。特別な FontAwesome フォントを使用しているため、Web に伝える必要があります。このフォント スタイルをロードするページ。

a. Axure リリース ページで、アクセサリ ファイルを変更します

b. フォントで新しい CSS を追加します。ウェブのスタイルフォント

リンクアドレス http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css

4. このようにして、FontAwesome が正常に使用できるようになります