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

質問編集履歴

1

HTMLとCSSのコードを貼りました!他に提示した方がいい箇所があれば教えてください。よろしくお願いいたします!!

2019/01/24 05:09

投稿

Hisato
Hisato

スコア18

title CHANGED
File without changes
body CHANGED
@@ -1,9 +1,52 @@
1
+ ```ここに言語を入力
2
+ コード
1
- ### FontAwesomeのアイコンにホバーした時に別の色をつけたい
3
+ ```### FontAwesomeのアイコンにホバーした時に別の色をつけたい
2
4
 
3
5
  FontAwesomeにcolorの指定をするとホバーしなくなります。カラーを指定する前はホバーしています。
4
6
 
7
+ ```HTML5
8
+ <!-- Connect -->
9
+ <div class="container-fluid padding">
10
+ <div class="row text-center padding">
5
- ![GIF](e04d0c23a784b6ea5f42145fa0cc6fe8.gif)
11
+ <div class="col-12">
12
+ <h2>Connect</h2>
13
+ </div>
14
+ <div class="col-12 social padding">
15
+ <a href="#"><i class="fab fa-facebook"></i></a>
16
+ <a href="#"><i class="fab fa-twitter"></i></a>
17
+ <a href="#"><i class="fab fa-google-plus-g "></i></a>
18
+ <a href="#"><i class="fab fa-instagram"></i></a>
19
+ <a href="#"><i class="fab fa-youtube"></i></a>
20
+ </div>
21
+ </div>
22
+ </div>
6
23
 
24
+ ```
25
+
26
+ ```CSS3
27
+ .fa-facebook {
28
+ color: #3b5998;
29
+ }
30
+ .fa-twitter {
31
+ color: #00aced;
32
+ }
33
+ .fa-google-plus-g {
34
+ color: #dd4b39;
35
+ }
36
+ .fa-instagram {
37
+ color: #517fa4;
38
+ }
39
+ .fa-youtube {
40
+ color: #bb0000;
41
+ }
42
+ .fa-facebook:hover,
43
+ .fa-twitter:hover,
44
+ .fa-google-plus-g:hover,
45
+ .fa-instagram:hover,
46
+ .fa-youtube:hover, {
47
+ color: #d5d5d5;
48
+ }
49
+ ```
7
50
  ### 補足情報(FW/ツールのバージョンなど)
8
51
 
9
52
  HTML5