１. ステップ４～Web Fonts with CSS編その１
ここからは Font Awesome のアイコンを「Web Fonts with CSS」というネーミングらしく、CSSで独自にスタイルを設定して、ステップ２とステップ３の例を見た目同じ(+α)に仕上げたいと思います。
２．Font Awesome 使用環境を少し補強
ステップ１でアイコンフォントを使うための２つの方法を述べました。CDN利用の場合でも、ダウンロード利用の場合でも、all.css というファイルにアクセスできるようにリンクを張ったわけです。all.css には、サイズを小さくした all.min.css というファイルも用意されています。機能は all.css と同じです。all.css は手動で編集するのに適していますし、 all.min.css は自動で編集するのに適しています。
CDN利用の場合は、自分で all.css を編集することはないのでミニ化された all.min.css にリンクを張ることにします。ダウンロード利用の場合は、all.css を編集するのであれば、all.css にリンクを張るほうが効率は良いかと思います。
ダウンロード版の中身を少し見てみましょう。css フォルダには、all.css と all.min.css が入っています。webfonts フォルダには、all.css と all.min.css がフォントの参照を行っているのファイルが入っているので扱い方に注意しましょう。「Web Fonts with CSS」で必要なのはこの２つのフォルダだけです。
js フォルダは「Web Fonts with CSS」の javascript バージョンである「SVG with JS」用です。svgs フォルダは Font Awesome アイコンの svg 画像集です。それ以外のフォルダはその言葉がわかる人用です。
Font Awesome の一部のフォントアイコンがうまく表示されないという場合があるかもしれません。例えば、 fas クラスの場合はアイコンが表示されるけど、fab クラスや far クラスの場合にはアイコンがうまく表示されない、という具合に。この場合は、v4-shims.css (ミニ化版：v4-shims.min.css )にリンクすることで解消される場合があるので、このリンクも張っておきます。
もう一つ注意点。「Web Fonts with CSS」と「SVG with JS」を同時に使うと競合が起こります。「SVG with JS」が優先され、「Web Fonts with CSS」で設定したはず通りのスタイルに表示されない場合があるので気を付けましょう。同じページで両方を使うことは避けた方が良いです。
以上から
CDN利用の場合は
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/v4-shims.min.css">
ダウンロード版の場合、私は all.css を改造して使っているので all.css、v4-shims.css は変更してないので、shims.min.css にリンクを張ります。
<link rel="stylesheet" href="your-path-to-fontawesome/css/all.css">
<link rel="stylesheet" href="your-path-to-fontawesome/css/v4-shims.min.css">
以上を<head>～</head>の適切な場所に追加します。
３．Font Awesome のスタイリング with CSS その１
Font Awesome で用意されたクラスを使うよりも、独自にCSSを書くと細かい設定ができるようになります。では、始めましょう。
3-1. アイコンのサイズを変更する with CSS
アイコンのサイズを変更するクラスです。font Awesome 付属の fa-2x ~ fa-10x などクラスで十分なのですが、微妙に倍率を変えたい場合は、font-size プロパティでサイズを指定します。少数点以下付きの倍率も指定できるので、こだわりたい場合は使い良いと思います。
<i class="fas fa-anchor myfa-xs"></i>
<i class="fas fa-anchor myfa-sm"></i>
<i class="fas fa-anchor myfa-1x"></i>
<i class="fas fa-anchor myfa-lg"></i>
<i class="fas fa-anchor myfa-2x"></i>
<i class="fas fa-anchor myfa-3x"></i>
<i class="fas fa-anchor myfa-4x"></i>
<i class="fas fa-anchor myfa-5x"></i>
.myfa-xs{font-size: 0.75em;}
.myfa-sm{font-size: 0.875em;}
.myfa-1x{font-size: 1.0em;}
.myfa-lg{
font-size: 1.33333em;
line-height: 0.75em;
vertical-align: -.0667em;
}
.myfa-2x{font-size: 2.3em;}
.myfa-3x{font-size: 3.7em;}
.myfa-4x{font-size: 4.1em;}
.myfa-5x{font-size: 5.55em;}
.myfa-xs{
font-size: 0.75em;
color:#ffec47;
}
.myfa-sm{
font-size: 0.875em;
color:#ffdb4f;
}
.myfa-1x{
font-size: 1.0em;
color:#f8b500;
}
.myfa-lg{
font-size: 1.33333em;
line-height: 0.75em;
vertical-align: -.0667em;
color:#f19072;
}
.myfa-2x{
font-size: 2.3em;
color:#d57c6b;
}
.myfa-3x{
font-size: 3.7em;
color:##00bfff;
}
.myfa-4x{
font-size: 4.1em;
color:#bbbcde;
}
.myfa-5x{
font-size: 5.55em;
color:#a2d7dd;
}
3-2. アイコンの横幅をそろえる with CSS
アイコンの横幅は、width プロパティで幅をそろえ、 text-align: center; で中央寄せします。
<div><i class="myfa-fw fas fa-swimmer"></i> １．水泳</div>
<div><i class="myfa-fw fas fa-wheelchair"></i> ２．車イス</div>
<div><i class="myfa-fw fas fa-blind"></i> ３．目の不自由な人</div>
<div><i class="myfa-fw fas fa-biking"></i> ４．オートバイ</div>
<div><i class="myfa-fw fas fa-female"></i> ５．女性</div>
<div><i class="myfa-fw fas fa-restroom"></i> ６．おトイレ</div>
.myfa-fw {
text-align: center;
width: 1.25em;
font-size: 2em;
}
.myfa-fw1 {
text-align: center;
width: 1.25em;
color:#38a1db;
font-size: 2em;
}
.myfa-fw2 {
text-align: center;
width: 1.25em;
color:#eb6ea5;
font-size: 2em;
}
.myfa-fw3 {
text-align: center;
width: 1.25em;
color:#c8c2c6;
font-size: 2em;
}
3-3. アイコンの回転と反転 with CSS
アイコンを回転させる場合は、transform プロパティにrotate() 関数を設定します。rotate(回転したい角度) を入れてやります。
<div class="myfa-2x">
<i class="fas fa-horse"></i>
<i class="fas fa-horse myfa-rotate1"></i>
<i class="fas fa-horse myfa-rotate2"></i>
<i class="fas fa-horse myfa-rotate3"></i>
<i class="fas fa-horse myfa-rotate5"></i>
<i class="fas fa-horse myfa-rotate6"></i>
</div>
.myfa-2x{font-size:2.2em;}
.myfa-rotate1{transform: rotate(30deg);}
.myfa-rotate2{transform: rotate(60deg);}
.myfa-rotate3{transform: rotate(90deg);}
.myfa-rotate4{transform: rotate(120deg);}
.myfa-rotate5{transform: rotate(150deg);}
.myfa-rotate6{transform: rotate(180deg);}
アイコンを反転させる場合は、transform プロパティに scale() 関数を設定します。scale(x軸, y軸) に 1 または -1 を入れます。
<div class="myfa-2x">
<i class="fas fa-horse"></i>
<i class="fas fa-horse myfa-flip-h"></i>
<i class="fas fa-horse myfa-flip-v"></i>
<i class="fas fa-horse myfa-flip-b"></i>
</div>
.myfa-2x{font-size:2.2em;}
.myfa-flip-h{transform: scale(-1, 1);}
.myfa-flip-v{transform: scale(1, -1);}
.myfa-flip-b{transform: scale(-1, -1);}
/* ベンダープレフィックス用 */
.myfa-flip-h{-webkit-transform: scale(-1, 1);}
.myfa-flip-v{-webkit-transform: scale(1, -1);}
.myfa-flip-b{-webkit-transform: scale(-1, -1);}
scale() 関数に、1 または -1 以外の数字を入れると、拡大縮小されます。
<div class="myfa-2x">
<i class="fas fa-horse"></i>
<i class="fas fa-horse myfa-flip-h2"></i>
<i class="fas fa-horse myfa-flip-v2"></i>
<i class="fas fa-horse myfa-flip-b2"></i>
</div>
.myfa-2x{font-size:2.2em;}
.myfa-flip-h2{
color: #b33e5c;
transform: scale(-0.5, 2);
}
.myfa-flip-v2{
color: #3cb37a;
transform: scale(1, -1.5);
}
.myfa-flip-b2{
color: #bcbace;
transform: scale(-1.5, -0.5);
}
/* ベンダープレフィックス用 */
.myfa-flip-h2{-webkit-transform: scale(-0.5, 2);}
.myfa-flip-v2{-webkit-transform: scale(1, -1.5);}
.myfa-flip-b2{-webkit-transform: scale(-1.5, -0.5);}
3-4. アイコンの色を変える with CSS
Font Awesome のアイコンは、見た目アイコン性格フォントなので、アイコンの色を変えるにはフォントの色を変える color プロパティを使います。アイコンの背景色を変えるには、background-color プロパティを使います。
<div class="myfa-2x">
<i class="myfa-color1 fas fa-bell"></i>
<i class="myfa-color2 fas fa-heart"></i>
<i class="myfa-color3 fas fa-tree"></i>
<i class="myfa-color4 fas fa-snowflake"></i>
<i class="myfa-color5 fas fa-bell"></i>
<i class="myfa-color6 fas fa-heart"></i>
<i class="myfa-color7 fas fa-tree"></i>
<i class="myfa-color8 fas fa-snowflake"></i>
</div>
.myfa-2x{font-size: 2.07em;}
.myfa-color1{color: #ffcc33;}
.myfa-color2{color: tomato;}
.myfa-color3{color: green;}
.myfa-color4{color: skyblue;}
.myfa-color5{
color: #ffcc33;
background-color: yellow;
}
.myfa-color6{
color: tomato;
background-color: pink;
}
.myfa-color7{
color: green;
background-color: #99ff99;
}
.myfa-color8{
color: skyblue;
background-color: #ccffff;
}
「 colorプロパティ 」でアイコンの色、「 text-shadowプロパティ 」でアイコンの影色、「 background-colorプロパティ 」で背景色「 borderプロパティ 」で枠色、「 box-shadowプロパティ 」で枠の影色をスタイリングできます。
<i class="myfa-color1 myfa-xx far fa-heart"></i>
<i class="myfa-color2 myfa-xx fas fa-heart"></i>
<i class="myfa-color3 myfa-xx far fa-heart"></i>
<i class="myfa-color4 myfa-xx fas fa-heart"></i>
.myfa-xx{font-size: 3em;}
.myfa-color1{
width:1.5em; /* 横幅 */
text-align: center; /* 左右中央 */
height:1.5em; /* 高さ */
line-height:1.5em; /* 上下中央 */
border-radius: 0.5em; /* 枠の角を丸くする */
color: red; /* アイコン色 */
text-shadow: 0 0 0.3em #f00; /* アイコン影色 */
background-color: rgba(255,0,0,0.08); /* 背景色 */
border: solid 3px rgba(255,0,0,0.2); /* 枠色 */
box-shadow: 0px 0px 0.2em 0.2em rgba(255,0,0,0.1);/* 枠影色 */
}
.myfa-color2{
width:1.5em;
text-align: center;
height:1.5em;
line-height:1.5em;
border-radius: 0.5em;
color: red;
text-shadow: 0 0 0.3em #fff;
background-color: rgba(255,0,0,0.2);
border: solid 3px rgba(255,0,0,0.2);
box-shadow: 0px 0px 0.2em 0.2em rgba(255,0,0,0.1);
}
上の化粧をしたアイコンをアニメーションクラスで動かしてみます。追加したCSS設定は10行程度ですが、これぐらいのアニメーションが簡単に作れるのが、CSSアニメーションの特徴です。CSSアニメーションについては、ステップ５で説明します。
<div class="myfa-xx">
<span class="ani-spin ani01">
<i class="ani-spin ani02 myfa-color1 far fa-heart"></i>
<i class="ani-spin ani03 myfa-color2 fas fa-heart"></i>
</span>
</div>
.ani-spin{display: inline-block;}
.ani-spin.ani01{animation: kfs 5s infinite;}
.ani-spin.ani02{animation: kfs 5s infinite alternate;}
.ani-spin.ani03{animation: kfs 5s infinite alternate-reverse;}
@keyframes kfs{
0% {
color: #fff;
text-shadow: 0 0 0.3em #red;
transform: rotate(0deg);
}
100% {
color: red;
text-shadow: 0 0 0.3em #fff;
transform: rotate(360deg);
}
}
3-5. アイコンを右寄せ・左寄せしてテキストを回り込ませる with CSS
Font Awesomeの fa-pull-rightクラス、fa-pull-left クラスは、float プロパティに right、left を指定して右寄せ・左寄せをしています。
<i class="myfa-3x myfa-pull-left fas fa-quote-left"></i>
<p>・・・ 文章 ・・・</p>
.myfa-3x{font-size: 3.0em;}
.myfa-pull-left{
margin-right: 0.3em;
float: left;
}
この厳密な決定論の哲学的基礎となっているのが、ソボコナ哲学がもたらしたハーゲアターマと世界との根本的な分離である。デンプン粒子の末裔であるソボコナ液は、ときに昇華し、ときに無秩序の状況を作り出す。これがいわゆる、二段腹禅と呼ばれる必殺技で、カスケードブラック粒子が裏宇宙最強と呼ばれるようになったそのときであった。あなたは、かすかに文字が動き文字色が変わっていくことに気が付いた。
3-6. アイコンを枠で囲む with CSS
border プロパティで囲んで border-radius プロパティで枠の角を丸めます。
<i class="myfa-3x myfa-border far fa-arrow-alt-circle-right"></i>
.myfa-3x{font-size: 3.3em;}
.myfa-border{
padding: 0.2em 0.25em 0.15em;
border: solid 0.08em #eeeeee;
border-radius: 0.1em;
}
<i class="myfa-border1 fas fa-angle-double-right"></i>
<i class="myfa-border2 fas fa-arrow-circle-right"></i>
.myfa-border1 {
font-size: 3em;
color: blue;
width: 1.2em;
text-align: center;
height: 1.1em;
line-height: 1.0em;
background-color: white;
border-radius: 0.1em;
border:solid 3px blue;
text-shadow: 3px 3px 2px #ccc;
box-shadow: 3px 3px 2px #ccc;
}
.myfa-border2 {
font-size: 3em;
color: green;
width: 1.3em;
text-align: center;
height: 1.2em;
line-height: 1.1em;
background-color: white;
border:solid 3px green;
border-radius: 0.1em;
text-shadow: 3px 3px 2px #ccc;
box-shadow: 3px 3px 2px #ccc;
}
3-7. リストでアイコンを使う with CSS
リストマーカーにアイコンを使う場合は、元々あるマーカーを消去して、アイコンの表示場所を確保して体裁を整えアイコンを配置するだけですが、設定の分量が多いです。 「 relative と absolute 」＋「 top、right、bottom、left 」を使ってアイコンの表示場所を決めています。
<ul class="myfa-ul">
<li>
<span class="myfa-li">
<i class="myfa-1x fas fa-dog"></i>
</span> わんこ
</li>
<li>
<span class="myfa-li">
<i class="myfa-1x fas fa-cat"></i>
</span> にゃんこ
</li>
<li>
<span class="myfa-li">
<i class="myfa-1x fas fa-ghost"></i>
</span> おばけ
</li>
<li>
<span class="myfa-li">
<i class="myfa-1x fas fa-child"></i>
</span> ばんざーい
</li>
</ul>
.myfa-1x{
font-size: 1.3em; /* アイコンサイズ */
}
.myfa-ul{
list-style-type: none; /* 既定マーカー消去 */
margin-left: 2.5em; /* アイコン場所確保 */
padding-left: 0; /* 文字の開始位置 */
}
.myfa-ul > li{
position: relative; /* top,leftを使う準備 */
}
.fa-li{
position: absolute; /* top,leftを使う準備 */
left: -2em; /* アイコン位置、top:0em; */
width: 2em; /* アイコン場所の幅 */
text-align: center; /* アイコンの左右中央寄せ */
line-height: inherit; /* 上下位置は親要素と同じ */
}
- わんこ
- にゃんこ
- おばけ
- ばんざーい
3-8. アイコンを重ねて表示する with CSS
キャンバスを用意（ fa-stack クラス ）し、2つのアイコンを中央に配置する（ fa-stack-x1、fa-stack-x2クラス ）やりかたです。これが、Font Awesome で用意されたアイコン重ね合わせクラスの標準仕様です。ひな形と言ったところでしょうか。これに肉付けをして好みのスタイルに仕上げていきましょう。
<span class="myfa-stack myfa-2x">
<i class="myfa-stack-2x fas fa-square"></i>
<i class="myfa-stack-1x myfa-inverse fas fa-star"></i>
</span>
.myfa-2x{font-size: 2.0em;}
.myfa-stack{
display: inline-block; /* インラインブロック */
position: relative; /* top,leftを使う準備 */
height: 2em; /* 高さ */
line-height: 2em; /* 上下中央揃え */
vertical-align: middle; /* 上下中央揃え */
width: 2.5em; /* 横幅 */
}
.myfa-stack-1x,
.myfa-stack-2x{
position: absolute; /* top,leftを使う準備 */
left: 0; /* 親要素と左を揃える */
width: 100%; /* 幅は親要素と同じ */
text-align: center; /* 左右中央揃え */
}
.myfa-stack-1x{
line-height: inherit; /* 親要素と同じ */
}
.myfa-stack-2x{
font-size: 2em; /* アイコンサイズ２倍 */
}
.myfa-inverse{
color: #ffffff; /* 反転色は白 */
}
<span class="ani-spin myfa-stack myfa-2x">
<i class="myfa-stack-1x fas fa-smile"></i>
<i class="myfa-stack-2x fas fa-cloud-showers-heavy"></i>
</span>
<span class="ani-spin myfa-stack myfa-2x">
<i class="myfa-stack-2xa fas fa-cloud-showers-heavy"></i>
<i class="myfa-stack-1xa fas fa-umbrella"></i>
</span>
<span class="ani-spin myfa-stack myfa-2x">
<i class="myfa-stack-1xb fas fa-star"></i>
<i class="myfa-stack-2xb fas fa-star"></i>
<i class="myfa-stack-3xb fas fa-star"></i>
<i class="myfa-stack-4xb fas fa-star"></i>
</span>
.myfa-stack-1xa{
position: absolute;
top: 1.7em;
left: 0em;
color: blue;
text-shadow: 0.04em 0.04em 0.05em #777;
}
.myfa-stack-2xa{
position: absolute;
top: 0em;
left: 0.3em;
color: #2DAEBF;
text-shadow: 0.04em 0.04em 0.05em #777;
font-size: 1.5em;
}
３個以上のアイコンを重ねたり、位置をずらしたり、全体をアニメーションしたり、個別にアニメーションしたりと色々できます。
コメント