質問編集履歴

3

タイトル

2019/02/15 07:06

投稿

gakukozuki
gakukozuki

スコア16

test CHANGED
@@ -1 +1 @@
1
- スマートフォン(iphone8 safari)でFontAwsomeのアイコンが表示されない
1
+ スマートフォン(iphone8, iOS12.1 safari)でFontAwsomeのアイコンが表示されない
test CHANGED
File without changes

2

コードの追加

2019/02/15 07:06

投稿

gakukozuki
gakukozuki

スコア16

test CHANGED
File without changes
test CHANGED
@@ -167,3 +167,5 @@
167
167
  PC上では表示されるFontAwsomeのアイコンが、iphoneのsafariでは表示されません。
168
168
 
169
169
  iphoneではキャッシュクリアも行ったのですがダメでした。また、CSSのファイルでFontAwsomeをインポートするといことも試してみたのですがこれもダメでした。ご意見いただけるとありがたいです。
170
+
171
+ ※body, css の内容は一部省いています。

1

コードの追加

2019/02/15 03:40

投稿

gakukozuki
gakukozuki

スコア16

test CHANGED
@@ -1 +1 @@
1
- スマートフォンでFontAwsomeのアイコンが表示されない
1
+ スマートフォン(iphone8 safari)でFontAwsomeのアイコンが表示されない
test CHANGED
@@ -1,3 +1,169 @@
1
- PC上ではアイコンが表示されるにも関わらず、携帯でスマートフォンでは表示されません。
1
+ ```HTML
2
2
 
3
- 何が問題でしょう?
3
+ <!doctype html>
4
+
5
+ <html lang="ja">
6
+
7
+ <head>
8
+
9
+ <!-- Required meta tags -->
10
+
11
+ <meta charset="utf-8">
12
+
13
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
14
+
15
+
16
+
17
+ <!-- Bootstrap CSS -->
18
+
19
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
20
+
21
+ <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
22
+
23
+ <link rel="stylesheet" href="css/style.css">
24
+
25
+ <title>gaku's portfolio</title>
26
+
27
+ </head>
28
+
29
+ <body>
30
+
31
+ <section id="skills">
32
+
33
+ <h1 class="text-center mb-5">Skills</h1>
34
+
35
+ <div class="container-fluid">
36
+
37
+ <div class="row text-center font-weight-lighter mt-5">
38
+
39
+ <div class="col-xs-12 col-sm-4 col-md-3 my-3">
40
+
41
+ <i class="fab fa-html5 fa-5x mb-2"></i>
42
+
43
+ <h5>HTML5</h5>
44
+
45
+ <p>経験: 2ヵ月</p>
46
+
47
+ </div>
48
+
49
+ <div class="col-xs-12 col-sm-4 col-md-3 my-3">
50
+
51
+ <i class="fab fa-css3-alt fa-5x mb-2"></i>
52
+
53
+ <h5>CSS</h5>
54
+
55
+ <p>経験: 2ヵ月</p>
56
+
57
+ </div>
58
+
59
+ <div class="col-xs-12 col-sm-4 col-md-3 my-3">
60
+
61
+ <i class="fab fa-php fa-5x mb-2"> </i>
62
+
63
+ <h5>PHP</h5>
64
+
65
+ <p>経験: 1ヵ月</p>
66
+
67
+ </div>
68
+
69
+ <div class="col-xs-12 col-sm-4 col-md-3 my-3">
70
+
71
+ <i class="fab fa-js-square fa-5x mb-2"></i>
72
+
73
+ <h5>JavaScript</h5>
74
+
75
+ <p>経験: 1ヵ月</p>
76
+
77
+ </div>
78
+
79
+ <div class="col-xs-12 col-sm-4 col-md-4 my-3">
80
+
81
+ <i class="far fa-gem fa-5x mb-2"></i>
82
+
83
+ <h5>Ruby</h5>
84
+
85
+ <p>経験: 1ヵ月</p>
86
+
87
+ </div>
88
+
89
+ <div class="col-xs-12 col-sm-4 col-md-4 my-3">
90
+
91
+ <i class="fas fa-bold fa-5x mb-2"></i>
92
+
93
+ <h5>Bootstrap</h5>
94
+
95
+ <p>経験: 1ヵ月</p>
96
+
97
+ </div>
98
+
99
+ <div class="col-xs-12 col-sm-4 col-md-4 my-3">
100
+
101
+ <i class="fab fa-wordpress fa-5x mb-2"></i>
102
+
103
+ <h5>Wordpress</h5>
104
+
105
+ <p>学習中</p>
106
+
107
+ </div>
108
+
109
+ </div>
110
+
111
+ </div>
112
+
113
+ </section>
114
+
115
+ </body>
116
+
117
+
118
+
119
+ ```
120
+
121
+
122
+
123
+ ```CSS
124
+
125
+ .fa-html5 {
126
+
127
+ color: #FF9999;
128
+
129
+ }
130
+
131
+
132
+
133
+ .fa-js-square {
134
+
135
+ color: #FFCC33;
136
+
137
+ }
138
+
139
+
140
+
141
+ .fa-css3-alt {
142
+
143
+ color: #0099FF;
144
+
145
+ }
146
+
147
+
148
+
149
+ .fa-php {
150
+
151
+ color: #3366CC;
152
+
153
+ }
154
+
155
+
156
+
157
+ .fa-gem {
158
+
159
+ color: #FF0000;
160
+
161
+ }
162
+
163
+ ```
164
+
165
+
166
+
167
+ PC上では表示されるFontAwsomeのアイコンが、iphoneのsafariでは表示されません。
168
+
169
+ iphoneではキャッシュクリアも行ったのですがダメでした。また、CSSのファイルでFontAwsomeをインポートするといことも試してみたのですがこれもダメでした。ご意見いただけるとありがたいです。