つなワタリ@プロ無謀家 | 炎ジョイ!高熱量で創造的に生きる

プロ無謀家&エディトリアルアーティスト「つなワタリ」によるブランディング&創造生活の提案→自分らしく輝き、可能性を追い求めながら生きよう!

インターネットお役立ち情報

【アイコンwebフォント】Font Awesomeで記事を華やかにする!

投稿日:2018-09-26 更新日:

Pocket

つなワタリ@捨て身の「プロ無謀家」(@27watari)です。現在(2018年9月末時点)、バージョン5.3配布中のアイコンwebフォント、「Font Awesome」の存在をご存じでしょうか。

 

自分のサイトでも簡単に使うことができ、見た目も楽しげで、導入すると記事が華やかになります。新しいモノ好きの人は、ぜひ使ってみてはいかがでしょうか。

Font Awesomeとは、web上で文字と同じように表示できるアイコン

通常、アイコンを導入する場合は、画像を自分のサーバーにアップし、それを記事に貼り付ける形です。

 

しかし! Font Awesomeを使えば、その手間は不要

 

リンクを追記するだけでサーバーにも負担をかけずに、さまざまなアイコンを自分の記事に表示することができます。

 

これです。

【アイコンwebフォント】Font Awesomeで記事を華やかにする!
Font Awesome
https://fontawesome.com/

 

 

 

 

バージョン5で一気に使い勝手がアップ! 使えるアイコンの種類は1300種類以上

Font Awesomeには有料版と無料版があります。

 

有料版は約4000種類、無料版でも1300種類以上ものアイコンが揃っています。

 

太っ腹です。無料版だけでもお腹いっぱいになってしまいます。

 

 

 

使い方は簡単! 登録してコードを貼り付けるだけ

使い方はとっても簡単です。

 

(1)サイトに登録

(2)コードの貼り付け(下記参照)

 

この2ステップで準備完了です。

 

コードは、下記のようなものを<head>〜</head>の中に貼り付ければオッケーです。
これによって「CDN(別の専用サーバーにあるデータを読み込む仕組み)」が利用できます。下記は見本です。必ずサイトからコピーしてください。

 

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

 

※wordpressの場合は、「header.php」内に貼り付けてください。
※ダウンロードはこちら

 

 

 

wordpress用のFont Awesomeプラグインはあるのか?

ちなみにwordpress用のFont Awesomeプラグインはあります。そちらの方が使いやすそうですが、トラブルが起きたりするケースも少なくないようです。できれば、コードを直接貼り込む方法がオススメです。

 

 

Font Awesomeアイコンを自分のサーバーにアップロードも可能

もし配布サーバーにトラブルが発生したら、アイコンは表示されなくなります。その点が不安です。それを避けたい人は、自分のサーバーにアップロードも可能です。しかし、それでは本来の使い方から外れていますので、割愛します。

 

 

 

Font Awesomeのアイコンを使ってみよう!

 

使い方も簡単です。

 

(1)使いたいアイコンを探す

(2)使いたいアイコンをクリック

(3)表示されたアイコン詳細ページになるコードをコピー

(4)アイコンを表示させたい場所にコードを貼り付ける

 

この4ステップで終了です。

 



 

Font Awesomeのアイコンはコードに補足を加えれば自在に変えられる

アイコンは色、サイズ、角度も自由自在に変えることができます。さらに二つのアイコンを合体させたり、動かすこともできてしまいます。

 

私的には動かすのに興味があります。

 

それぞれの方法は「サルワカ」というサルワカくんのサイトが詳しいです。そちらをご確認ください。サルワカくんはwordpressテーマ「SANGO」を開発された方なんですね。非常にわかりやすいサイトです。すごいです。

 

【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう

 

 

 

アイコンの動作は3パターン! 面倒なのでやらないが……

Font Awesomeはアイコンを動かすことができるので、アスキーアート的に動きのある遊び画面を作ることができたら面白いかも? なんて思いました。

動作は「On DOM load」「On hover」「On parent hover」の3種類あります。

どのような動きをするのかは、下記ページからご覧になってください。

 

Font Awesomeのアイコン動作は3種類

http://l-lin.github.io/font-awesome-animation/

 

いかがでしたか? 使ってみたくなりましたか?

 

私は……ヒマだったら、遊んでみます。

 

では!

 

↓[ Googleセレクト 関連コンテンツ ]↓



wordpressやるなら
エックスサーバーがオススメ!

このサイトはスタート時より「wordpress × エックスサーバー」によって運営しております。他のサーバーとも契約をして別サイトを構築しておりますが、エックスサーバーの使い勝手がイチバンです。セキュリティ、サポートに満足しております。しかも低コストです。利用者が多いので情報がネットに多いことも助かります。

詳細は下記ボタンより

 

 

 

インターネットお役立ち情報の最新記事

-インターネットお役立ち情報
-

執筆者:

関連記事

【世界一幸せな動物】クオッカ(Quokka)が日本にやってきた! 埼玉県こども動物自然公園で公開中

【世界一幸せな動物】クオッカ(Quokka)が日本にやってきた! 埼玉県こども動物自然公園で公開中

つなワタリ@捨て身の「プロ無謀家」(@27watari)です。私の趣味は、海外のGoogle検索すること。超お手軽な世界旅行気分で楽しめます。 ずっと個人的な趣味だったけど、ツイートでバズリを狙って( …

【Amazonアソシエイト】平均的コンバージョン率は?必勝の改善法は?

【Amazonアソシエイト】平均的コンバージョン率は?必勝の改善法は?

つなワタリ@捨て身の「プロ無謀家」(@27watari)です。みなさんはAmazonアソシエイトはやられてますか? 私はなんとなくリンクを貼っている程度です。あまり積極的な活用はしていませんが、ふとA …

【ドメインとは? 登録の仕組みは?】業者を通さず個人で取得可能? 更新日を過ぎたら、すぐに失効?

【ドメインとは?登録方法は?】個人で取得可能?更新日過ぎたら失効?

つなワタリ@捨て身の「プロ無謀家」(@27watari)です。いきなり「WHOIS Data Confirmation for 自分のドメイン」というメールが届きました。その問題は解決したのですが、 …

【Googleにクロール依頼する方法】新規・更新ページをイチ早く&簡単に!

【Googleにクロール依頼する方法】新規・更新ページをイチ早く&簡単に!

つなワタリ@捨て身の「プロ無謀家」(@27watari)です。Googleサーチコンソールが本格的に新しいバージョンに移行しつつあるようですね。残念ながらいつも新規記事のクロール依頼していたページが使 …

【被リンクチェックツール3選】簡単に被リンクを増やす「逆転の発想」

【被リンクチェックツール3選】簡単に被リンクを増やす「逆転の発想」

つなワタリ@捨て身の「プロ無謀家」(@27watari)です。自分のサイトでアクセスが突出している記事はありませんか? 私にはわずかながらあります。その理由は「被リンクを調べる」ことで解決することが多 …


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連コンテンツ

サイト内検索はこちらから↓

サイト内検索はこちら

アマゾンセール

80%オフも! 日替わり! 売り切れ次第終了! 掘り出し物ザクザク! 最新Amazonセール情報 ↓

同カテゴリーの人気記事

「同カテゴリーの人気記事」はこちら ↓

「ブルボン最高党」結党! ルマンド、アルフォート、エリーゼ……国民的お菓子メーカー、ブルボン最高!

つなワタリです。どうぞよろしくお願いいたします。 


LINE友だち追加

肩書きは「エディトリアル・アーティスト」&捨て身の高熱量「プロ無謀家」。集めて、編んで、外に発信することが生業。文章、映像、写真、イベント、コミュニケーションなどを活用しながら編み、考えていることを掘り下げて伝えていきたいと思っています。また、自分に負荷を与えるのが好きな性質を利用して、「プロ無謀家」として獣道を切り開きたいと思っています。

サイトタイトルの『インテリジェンス・ライフ』は「intelligence for good life」の略。生きた情報(インフォメーションではなくインテリジェンス)を大切にしたいという願望からつけました。

>>>プロフィール詳細

>>>お問い合わせ

>>>What’s New

>>>ウィッシュ☆ネットワーク|相談・共有・情報交換掲示板

70代のLINEスタンプおじいちゃん Appleの2021年CM「Macの向こうから - 日本でつくる」出演者一覧 auブックパス Google トレンド IT用語辞典 e-Words IT用語辞典バイナリ LINEスタンプを作る SEOチェキ WWEのシナリオ Yahoo!知恵袋 “ サツマイモのコリアンダーソースがけ ” “ シュリンプの焼き串 ” “ ズッキーニとチキンのケバブ ” 「つなワタリ×LINEスタンプ」宣言 「リラックまん(チョコレート味)」 「リラックマ」をモチーフにした和菓子 お酒が飲めない、飲まない日本の有名人 ぬるぽ アクセスSEO対策ツールズ エックスサーバー(XSERVER)を装った詐欺メール オススメ有料&無料wordpressテーマ コピー防止は、さほど防止できない サイト状態を確認する無料の便利サイト サブドメインとサブディレクトリ ネットショップ/セール情報 パワーランクチェックツール ビジネスホテル「ドーミーイン」 ポンポコラーメン マヌカハニー好きな有名人 ルッソ兄弟 七ヶ宿ダム湖カレー 大仏三姉妹 岩本三千代 愛知県西三河地方 有料wordpressテーマ 東京五輪の聖火リレーの辞退者続出 格安予約サイト『一休.com』 検索避け 楽天市場ダイヤモンドジュエリー「Ladia(ラディア)」 源流ポッチョン 無料漫画サービス 福田赳夫「天の声にも変な声がたまにはある」 超お得なティファニー風ダイヤモンドジュエリー 道の駅七ヶ宿 電脳マヴォ
2021年4月
 1234
567891011
12131415161718
19202122232425
2627282930  
スポンサーリンク