• サイト内検索
  • サイトマップ
  • twitter
  • pixiv

エントリー

ホーム    ブログ    サイト備忘録

freo備忘録:FontAwesome導入

Font Awesome 導入

https://fontawesome.com/
Font Awesome はサイト内でアイコン使いたいな!って時に画像を態々作らなくてもアイコンのように使用できる優れものです。

こういうの→
有料版と無料版があるけど無料版でもかなり使えます!

pixivのアイコンもあればいいのになぁ……。
今、現在ないってことはもう作られないのかなあ?
pixiv公式が配布しているアイコンとか画像は使用の条件が色変え不可とか結構厳しいせいかなあ?
残念(´・ω:;.:...

で、以下のサイトを参考に導入しました。
【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう
コピペで使えるCSSデザインサンプル集(Web用コード250個以上まとめ)
文字のように扱えるアイコンフォント「Font Awesome 5」の導入と疑似要素で表現する時の注意点 | Analog Studio

※Font Awesome 5の仕様変更でfont-weightを指定しないと表示されない問題
これすごく悩んだ…!!
5から仕様変更になったのねぇ(;´Д`)

擬似要素(before)でFontAwesome 5を表示する記述
.クラス名::before {
 font-family: "Font Awesome 5 Free";
 content: "\fxxx"; /*使いたいアイコンのUnicode 冒頭に「\」をつけること*/
 font-weight: 900; /*solidタイプは900 or bold*/
 margin: ?px; /*文字と隙間を作りたい時とか指定*/
 color: #xxxxxx; /*アイコンの色指定*/
}
Font Awesomeをアップロードで使う

Start a New Project | Font Awesome
こちらのFont AwesomeのCDN(自サバにうpじゃなくてご相伴させてもらうURL)を使っていたのだがやはり自サバにうpして使いたいなと思ってやってみた。

Hosting Font Awesome Yourself | Font Awesome
こちらに自サバうpでの使用方法が載っているんだけど、まあ英語だから良くわかんないんだけどw、all.cssだけじゃ表示されなかったので
fontawesome.css
brands.css
solid.css
と全部張ったった!

で、問題なく表示されたんだけど……

header.htmlでのcssの優先順番でFontAwesome関係のcssをdefault.cssより先に記述しないとアイコンが読み込まれず

あかんやつや あかんやつや あかんやつや あかんやつや あかんやつや

Σ(゚д゚) エッ!?
こんな感じで表示されるので注意。


まあ、リロードすればちゃんと表示されるんだけど、初訪問の時にこんなんなってたらヤバイもんね(^ω^;)
画像のリンク切れてる、更新されていないサイトみたいだもんね。
まあ、更新されていないサイトだけどねァ '`,、'`,、('∀`) '`,、'`,、

IcoMoonを使ってFont Awesomeのアイコンを必要なものだけ使う方法 - Eyes, JAPAN Blog

こちらに Icon Font & SVG Icon Sets ❍ IcoMoon を使って、Font Awesomeの使いたいアイコンだけDLしてうpして使う方法が載っていたんですが、どうもうまくいかないのでまた時間がある時に再挑戦したいと思う所存……(´ε`;)

freo導入メモまとめは以下。
freo導入まとめ

このページのタイトルとURLをコピーする

ブログ関連記事

ユーティリティ

イベント参加予定

2019年04月29日
申込済み
2019年05月12日
申込済み
2019年05月26日
申込済み
2019年08月10日
申込済み
同人情報

新着作品

黒頭巾くんとオオカミさん2 同人誌

2019年2月17日異種ラブ新刊

書店: とらのあな アリスブックス

DL版: 後日更新予定

黒頭巾くんとオオカミさん 同人誌

2018年4月30日けもケット新刊

書店: とらのあな アリスブックス

DL版: BOOTH DiGiket DLsite FANZA

隣人注意報 前編 同人誌

2014年3月9日J.GARDEN新刊

書店: 後日更新予定

DL版: 後日更新予定

作品一覧

書店

とらのあな
アリスブックス
DiGiket.com
BL同人・ボーイズラブ・BLマンガのダウンロードなら「DLsite がるまに」