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

質問編集履歴

3

タイトル

2019/02/15 07:06

投稿

gakukozuki
gakukozuki

スコア16

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

2

コードの追加

2019/02/15 07:06

投稿

gakukozuki
gakukozuki

スコア16

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

1

コードの追加

2019/02/15 03:40

投稿

gakukozuki
gakukozuki

スコア16

title CHANGED
@@ -1,1 +1,1 @@
1
- スマートフォンでFontAwsomeのアイコンが表示されない
1
+ スマートフォン(iphone8 safari)でFontAwsomeのアイコンが表示されない
body CHANGED
@@ -1,2 +1,85 @@
1
- PC上ではアイコンが表示されるにも関わらず、携帯でスマートフォンでは表示されません。
2
- 何が問題でしょう?
1
+ ```HTML
2
+ <!doctype html>
3
+ <html lang="ja">
4
+ <head>
5
+ <!-- Required meta tags -->
6
+ <meta charset="utf-8">
7
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
8
+
9
+ <!-- Bootstrap CSS -->
10
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
11
+ <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
12
+ <link rel="stylesheet" href="css/style.css">
13
+ <title>gaku's portfolio</title>
14
+ </head>
15
+ <body>
16
+ <section id="skills">
17
+ <h1 class="text-center mb-5">Skills</h1>
18
+ <div class="container-fluid">
19
+ <div class="row text-center font-weight-lighter mt-5">
20
+ <div class="col-xs-12 col-sm-4 col-md-3 my-3">
21
+ <i class="fab fa-html5 fa-5x mb-2"></i>
22
+ <h5>HTML5</h5>
23
+ <p>経験: 2ヵ月</p>
24
+ </div>
25
+ <div class="col-xs-12 col-sm-4 col-md-3 my-3">
26
+ <i class="fab fa-css3-alt fa-5x mb-2"></i>
27
+ <h5>CSS</h5>
28
+ <p>経験: 2ヵ月</p>
29
+ </div>
30
+ <div class="col-xs-12 col-sm-4 col-md-3 my-3">
31
+ <i class="fab fa-php fa-5x mb-2"> </i>
32
+ <h5>PHP</h5>
33
+ <p>経験: 1ヵ月</p>
34
+ </div>
35
+ <div class="col-xs-12 col-sm-4 col-md-3 my-3">
36
+ <i class="fab fa-js-square fa-5x mb-2"></i>
37
+ <h5>JavaScript</h5>
38
+ <p>経験: 1ヵ月</p>
39
+ </div>
40
+ <div class="col-xs-12 col-sm-4 col-md-4 my-3">
41
+ <i class="far fa-gem fa-5x mb-2"></i>
42
+ <h5>Ruby</h5>
43
+ <p>経験: 1ヵ月</p>
44
+ </div>
45
+ <div class="col-xs-12 col-sm-4 col-md-4 my-3">
46
+ <i class="fas fa-bold fa-5x mb-2"></i>
47
+ <h5>Bootstrap</h5>
48
+ <p>経験: 1ヵ月</p>
49
+ </div>
50
+ <div class="col-xs-12 col-sm-4 col-md-4 my-3">
51
+ <i class="fab fa-wordpress fa-5x mb-2"></i>
52
+ <h5>Wordpress</h5>
53
+ <p>学習中</p>
54
+ </div>
55
+ </div>
56
+ </div>
57
+ </section>
58
+ </body>
59
+
60
+ ```
61
+
62
+ ```CSS
63
+ .fa-html5 {
64
+ color: #FF9999;
65
+ }
66
+
67
+ .fa-js-square {
68
+ color: #FFCC33;
69
+ }
70
+
71
+ .fa-css3-alt {
72
+ color: #0099FF;
73
+ }
74
+
75
+ .fa-php {
76
+ color: #3366CC;
77
+ }
78
+
79
+ .fa-gem {
80
+ color: #FF0000;
81
+ }
82
+ ```
83
+
84
+ PC上では表示されるFontAwsomeのアイコンが、iphoneのsafariでは表示されません。
85
+ iphoneではキャッシュクリアも行ったのですがダメでした。また、CSSのファイルでFontAwsomeをインポートするといことも試してみたのですがこれもダメでした。ご意見いただけるとありがたいです。