[CSS]Font Awesome 5でWEBフォントを背景で指定する方法

CSSスニペット

2020.04.20

スポンサーリンク

目次

CSS
1. ボタンにFont Awesome 5の矢印を指定

CSS

ボタンにFont Awesome 5の矢印を指定

<link rel="stylesheet" href="fontawesome/css/all.min.css">
<style>
.btn	{
	position: relative
}

.btn:after,
.btn:before           {
	position: absolute;
	font-family: "Font Awesome 5 Free";
	font-weight: 900
}

.btn:after    {
	right: 1em;
	content: '\f054';
	font-size: 100%;
	line-height: 1
}

.btn:before      {
	left: 1em;
	content: '\f104';
	font-size: 100%;
	line-height: 1
}
</style>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

<link rel="stylesheet" href="fontawesome/css/all.min.css">

<style>

.btn {

position: relative

}

.btn:after,

.btn:before {

position: absolute;

font-family: "Font Awesome 5 Free";

font-weight: 900

}

.btn:after {

right: 1em;

content: '\f054';

font-size: 100%;

line-height: 1

}

.btn:before {

left: 1em;

content: '\f104';

font-size: 100%;

line-height: 1

}

</style>

ポイントは、font-family: “Font Awesome 5 Free”と、font-weight: 900を記述すること。

この記述がないとアイコンが表示されません。

コメント

タイトルとURLをコピーしました