この記事ではFontAwesomeをBloggerで使用するための方法について解説してきます．HTMLを編集するだけですぐにFontAwesomeを導入しておしゃれなデザインを使用することができますので導入してみたいけどやり方がわからないという方やとりあえず導入しておきたいという方は是非この記事を読んでみてください．
ちなみにFontAwesomeを使用することで以下の画像のようにおしゃれなSNSアイコンを簡単に配置することが可能になります．
今回はFontAwesomeの導入方法のみですが後々FontAwesomeを使用したブログのカスタマイズなどについても書いていけたらと思います．
それではさっそく導入方法について解説していきます．
FontAwesomeの導入方法
昔の記事を見ると以下のコードをの直前に挿入するだけでいいよといっている方がいますがそれだけではfont-familyとしてFontAwesomeを使用することはできません．
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"/>
もちろんclass = "fa ~"みたいな形では使用できるんですがcssのカスタマイズを自身で行いたいという方にとってはfont-familyとして指定できないのは少し残念なポイントですよね．
というわけでfont-familyとしてもFontAwesomeを使える形で導入する方法について解説していきます．
まずは公式サイトのGet Startedにアクセスしてください．
そしてメールアドレスを入力して Send Kit Codeをクリックしてください．
しばらくするとメールアドレスにメールが届いているかと思いますのでClick to Confirm ~のボタンをクリックしてください．
そしてサイトに接続しますと以下のようなコードが表示されてるかと思いますのでそのコードをブログのHTMLの/headのすぐ上の部分に挿入すれば完成です．
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"/>
<script crossorigin='anonymous' src='https://kit.fontawesome.com/yourownfile.js'/>
結局linkのほうもいるんかいという方もおられるかと思いますがやはり入れておいたほうが無難なきがしますね．今回新たに追加したscriptのほうはfont-family: FontAwesome;という表現を使えるようにしたという感じです．
まとめ
というわけで今回はFontAwesomeを導入する方法について解説しました．
普段使いする文にはcssのlinkを追加するだけでいいんですがやはり独自でCSSを書く場合はfont-family: FontAwesome;を使用している方が多いのでそれに対応するべく今回の記事を活用していただけますと幸いです．
0 件のコメント :
コメントを投稿