teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

コード追記

2020/09/04 08:22

投稿

hatena19
hatena19

スコア34367

answer CHANGED
@@ -2,4 +2,44 @@
2
2
 
3
3
  下記を参考にしてください。
4
4
 
5
- [Font Awesome 5 の使い方 / Web Design Leaves](https://www.webdesignleaves.com/pr/plugins/fontawesome_01.html)
5
+ [Font Awesome 5 の使い方 / Web Design Leaves](https://www.webdesignleaves.com/pr/plugins/fontawesome_01.html)
6
+
7
+ ---
8
+ **疑似要素で表示させる場合**
9
+ 下記で表示できるようです。
10
+ `font-weight: 900;` が必要。
11
+
12
+ ```css
13
+ .pa-top-guilde-list__item dl:after {
14
+ position: absolute;
15
+ right: 8px;
16
+ top:50%;
17
+ transform:translateY(-50%);
18
+ color: #aaa;
19
+ content: "\f105";
20
+ font-family: "Font Awesome 5 Free";
21
+ font-weight: 900;
22
+ font-size: 18px;
23
+ }
24
+ ```
25
+ ---
26
+ **<i class="fas fa-angle-right"></i> で表示させる場合**
27
+ ```html
28
+ <p class="pa-top-guilde-list__img fas">
29
+ <i class="fas fa-angle-right"></i>
30
+ </p>
31
+ ```
32
+ ```css
33
+ .pa-top-guilde-list__img {
34
+ position: relative;
35
+ }
36
+ .pa-top-guilde-list__img > i.fa-angle-right {
37
+ position: absolute;
38
+ right: 8px;
39
+ top:50%;
40
+ transform:translateY(-50%);
41
+ color: #aaa;
42
+ content:"\f101";
43
+ font-size: 18px;
44
+ }
45
+ ```