xn--ecka7j.biz
FontAwesomeアイコンでサイトデザイン ２
FontAwesomeアイコンでサイトデザインの２回目です。
今回は、「文字と合わせて表示、Linkも！」、「アイコン重ね表示」、「文字とアイコン重ね表示」、「spinの違い」、「アイコンと”fa-spin”と”rotate3d”で、疑似3Dアニメーション 」などをお伝えしたいと思います。
前回の
「FontAwesomeアイコンデザイン １」は、
ここからどうぞ
など、
アメブロではFontAwesome5アイコンの利用が出来ないため、「表示」欄のアイコンは空白となってしまいます。
アイコンの確認は、➡
ここからお願いします。
| # | 表示 | 定義 |
|---|---|---|
| f5c3 | Design | 文字と合わせて表示、Linkも！ ＜i class=”fas fa-swatchbook fa-5x” style=”color:rgb(255, 255, 255);”＞＜／i＞ ＜a href=”https://xn--ecka7j.biz/category/site-operation/design/” target=”_blank”＞ ＜span style=”color:wheat;font-weight:900;font-size:200%;”> Design＜/a＞ |
| f47e | class=”fas fa-hospital-symbol fa-2x”:2倍表示 | |
| f015 | class=”fas fa-home” class=”fas fa-home fa-3x”:３倍 |
|
| f0fe | class=”fas fa-plus-square” class=”fas fa-plus-square fa-2x” |
|
| f015 & f0fe |
Dental_Office |
２つのアイコン重ね表示:重ねたい２つのアイコンの 親要素（span要素）にfa-stackクラスを追加。 土台となるアイコンにfa-stack-2xクラスを追加。(style=”color:#ffc0cb”) その上に重ねるアイコンに fa-stack-1x fa-inverseクラスを追加。(style=”color:#ff0000″) 後から記述されたアイコンが前面に表示されます。 fa-inverseクラスで色の反転（knock-out looking effect） 最後の＜/i＞の後から ＜br＞＜span style=”font-weight:900;font-size:50%;text-align:center;”＞Dental_Office＜/span＞ |
| f015 & f5c9 |
２つのアイコン重ね表示 span class=”fa-stack fa-2x” class=”fas fa-home fa-stack-2x” style=”color:#00ffff;” class=”fas fa-tooth fa-stack-1x fa-inverse“ |
|
| f015 & f5c9 |
歯 | 文字とアイコン重ね表示 ＜span class=”fa-stack fa-2x”＞ ＜i class=”fas fa-home fa-stack-1x” style=”color:rgb(0, 145, 255);”＞＜/i＞ ＜i class=”fa-stack-1x”＞＜b＞歯＜/b＞＜/i＞＜/span＞ |
| f5c9 | ＜td class=”w55″ style=”background-color:#0000ff”＞ ＜i class=”fas fa-tooth fa-inverse fa-3x”＞＜／i＞＜／td＞ |
|
| f248 | class=”fas fa-object-ungroup” class=”fas fa-object-ungroup fa-2x” |
|
| class=”far fa-object-ungroup” class=”far fa-object-ungroup fa-2x” |
||
| f247 | class=”fas fa-object-group” class=”fas fa-object-group fa-2x” |
|
| class=”far fa-object-group” class=”far fa-object-group fa-2x” |
||
| f2bb | class=”fas fa-address-card” class=”fas fa-address-card fa-2x” |
|
| class=”far fa-address-card fa-2x” | ||
| f100 | class=”fas fa-angle-double-left fa-2x” | |
| f104 | class=”fas fa-angle-left fa-2x” | |
| f053 | class=”fas fa-chevron-left fa-2x” | |
| f101 | class=”fas fa-angle-double-right fa-2x” | |
| f105 | class=”fas fa-angle-right fa-2x” | |
| f054 | class=”fas fa-chevron-right fa-2x” |