FireFoxのAwesome 5が表示不可です
- FireFoxでFont Awesome 5のアイコンが表示されません
- 他のブラウザでは正しく表示されるのに、FireFoxだけ表示されません
- webfontsホルダーとcss管理用ホルダーを作成し、cssファイルを適切に指定しているのに、FireFoxではアイコンが表示されません
- ベストアンサー
FireFoxのAwesome 5が表示不可です
Font Awesome 5を利用してHPを作成しているのですが、ブラウザのEdge、IE、Chromeではきちんと任意のアイコンを表示してくれますが、何故かFireFoxだけは四角の中にf05aなどの文字だけしか表示しません。同じ場所にFont Awesome 5でダウンロードしたwebfontsホルダーと、作成したcss管理用ホルダーとしてホルダー名cssを作成しall.min.cssはホルダー名cssの中にall.min.cssを保存しました。(添付画像) header内には<link rel="stylesheet" type="text/css" href="css/all.min.css">と記述しました。何故FireFoxだけ表示しないかどなたかご教授下さい。よろしくお願いいたします。
- jeday8118
- お礼率74% (56/75)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
こんばんは。 どのように指定しています？ Font AwesomeのアイコンをCSSで指定しているのであれば、 font-weight:900; を追加したらいかがでしょう。
関連するQ&A
- フォントのサイズが変わってしまいサイトが崩れる
IEとファイヤーフォックスでフォントのサイズが変わってしまい、自作サイトが崩れてしまいます。 調べたところ下記のような情報があったのですが、この方法がよいのでしょうか？ http://kudox.jp/html-css/font-size-css また上記通りにする場合下記は <link rel="stylesheet" type="text/css" href="/css/fontsize.css" media="all" /> <!--[if IE]> <link rel="stylesheet" type="text/css" href="/css/fontsize_ie.css" media="all" /> <![endif]--> 最優先させるのでしょうか？最優先なら下記のような感じでよいのでしょうか？ <link rel="stylesheet" href="reset.css" type="text/css" /> <link rel="stylesheet" href="base.css" type="text/css" /> <link rel="stylesheet" href="page.css" type="text/css" /> <link rel="stylesheet" type="text/css" href="/css/fontsize.css" media="all" /> <!--[if IE]> <link rel="stylesheet" type="text/css" href="/css/fontsize_ie.css" media="all" /> <![endif]--> またmedia="all"はとりあえずすべてにつけておいたほうがよい属性と考えてよいのでしょうか？ 教えてください。
- ベストアンサー
- HTML
- <!--[if lte IE 9]>
たまに、人の作ったサイトの中のソースに <!--[if lte IE 9]> <link rel="stylesheet" href="https://○○min.css" media="all"> <![endif]--> というのを見かけるのですが、これはどういう意味ですか？
- ベストアンサー
- HTML
- CSSの読み込み開始までラグがあります
header.php、main.php、footer.phpの３ファイルを作成して、 index.phpに include './header.php'; include './main.php'; include './footer.php';などとして読み込ませました。 cssファイルは、header.phpの<head>に <link rel="stylesheet" type="text/css" href="header.css"> <link rel="stylesheet" type="text/css" href="main.css"> <link rel="stylesheet" type="text/css" href="footer.css"> の形で記述されています。 javascriptがあり、これも同様に<head>に記述されています。 以上のファイルはすべて同じフォルダ内にあり、これをlocalhostで表示させました。 これをchromeで要素を検証してみたところ、 cssの読み込み開始までに2秒近いラグがあります。 このラグの考えられる原因は何があるでしょうか。 どなたか心当たりのある方、教えてください。よろしくお願いします。
- ベストアンサー
- CSS
- Firefoxで2ちゃんねるのAAがずれます
AAをhtmlに保存しいつでもブラウザで見られるように編集していたのですが、 Firefoxのフォントをヒラギノにしているためかずれてしまいます。 「AA html ずれ」などのワードで検索し、cssを外部読み込みするところ までたどり着けたのですが、なぜかAAの部分がMS Pゴシックで表示されません。 cssには ---ここから--- /* AAをずれないようにする */ div.ascii-art{ font-size:12pt; line-height:18px; font-family: 'ＭＳ Ｐゴシック','ＭＳＰゴシック','MSPゴシック','MS Pゴシック'; } ---ここまで--- このような記述をしました。 そしてhtmlには ---ここから--- <link rel="stylesheet" href="bace.css" type="text/css" /> ---ここまで--- こう記述し、フォントサイズは問題なく適用されているようです。（12pt→16ptで変化があったため） なぜフォントが適用されないのでしょうか？ 原因を教えて下さい。よろしくお願いします。
- ベストアンサー
- HTML
- 長いCSSコードについて
https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css このようなコードは１から手書きでかかれてるのですか？それともなにかダウンロードが必要なのですか？
- ベストアンサー
- HTML
- ｃｓｓでtableをセンター表示
現在dreamweaverを使用してホームページを作成中のHTML初心者です。 外部cssを使って、各ページをセンター表示させたいのですが、うまくできません。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>***</title> <link rel="stylesheet" href="common.css" type="text/css" > </head> <body> <div class="header"> このcss[header]でマージン指定をしたのですが、 テーブルは右側に寄ったままです。 どなたかよろしくお願いいたします。
- ベストアンサー
- HTML
- FirefoxでSymbolフォントが表示されない
Firefoxで特定の場合にシンボルフォントが表示されずにブラウザのデフォルトフォントで表示されてしまい困っています。 1. <font face="Symbol">などとfontタグを用いて指定すれば表示されるのですが、cssでfont-family:Symbolと指定された場合には表示されません。 2. fontタグで指定しても場合によっては表示されないことがあります。 ブログでfontタグで指定したのですが、なんらかのcssが邪魔をしたのか、表示されませんでした。 Symbol,Windings,Marlettなどのシンボルフォントは全て駄目のようです。 ここで質問ですが、 cssでfont-family指定されたシンボルフォントを見られるようになるFirefox側の設定はあるでしょうか? また逆に、初期設定のFirefoxでも表示されるようなcssの指定はできないでしょうか?
- 締切済み
- ブラウザ
- Macfirefox3とMacfirefox2以下でCSSを切り替えたい
MacのFirefox3は、Firefox2までとはデフォルトフォントサイズが 違うので、Firefox3とそれ以外のFirefoxで分けたいです。 今まで、CSSを以下のスクリプトでブラウザ別に分岐していました。 MacのFirefox3の分岐を増やしてみたのですが、それ以外のFirefoxのCSSに 分岐されてしまいます。 あまりJavascriptに明るくないので、 どうしてわかれてくれないものか困っています。 どうぞお知恵をお貸し下さい！ ↓以下、かいてみたソースです。 var Win=(navigator.userAgent.indexOf("Win")!=-1); var Mac=(navigator.userAgent.indexOf("Mac")!=-1); var Explorer=(navigator.appName.indexOf("Explorer")!=-1); var Firefox=(navigator.userAgent.indexOf("Firefox") !=-1); var Netscape=(navigator.appName.indexOf("Netscape")!=-1); var opera=(navigator.userAgent.indexOf("Opera")!=-1); var safari=(navigator.userAgent.indexOf("Safari")!=-1); var Version=navigator.appVersion.charAt(0); if(safari){ document.write('<LINK rel="stylesheet" href="/css/mac_safari.css" type="text/css">'); } else if(Win && Explorer && Version=="6"){ document.write('<LINK rel="stylesheet" href="/css/win_ie.css" type="text/css">'); } else if(Win && Firefox){ document.write('<LINK rel="stylesheet" href="/css/win_ie.css" type="text/css">'); } else if(Win && opera){ document.write('<LINK rel="stylesheet" href="/css/win_ie.css" type="text/css">'); } /*増やしたところ*/ else if(Mac && Firefox && Version=="3"){ document.write('<LINK rel="stylesheet" href="/css/mac_safari.css" type="text/css">'); }/*増やしたところ終わり*/ else if(Mac && Firefox){ document.write('<LINK rel="stylesheet" href="/css/mac.css" type="text/css">'); } else if(Mac && opera){ document.write('<LINK rel="stylesheet" href="/css/mac_safari.css" type="text/css">'); } else if(Win && Netscape && Version=="4"){ document.write('<LINK rel="stylesheet" href="/css/win_nn.css" type="text/css">'); } else if(Mac && Explorer && Version=="5"){ document.write('<LINK rel="stylesheet" href="/css/mac_safari.css" type="text/css">'); } else if(Mac && Netscape && Version=="7"){ document.write('<LINK rel="stylesheet" href="/css/mac.css" type="text/css">'); } else if(Mac && Netscape && Version=="4"){ document.write('<LINK rel="stylesheet" href="/css/mac.css" type="text/css">'); } else{ document.write('<LINK rel="stylesheet" href="/css/font.css" type="text/css">'); }
- ベストアンサー
- JavaScript
- ファイヤーフォックスでCSSが読み込まれません
会社のホームページを担当していて困っています。 ＩＥでは、きちんと表示されるのですが ファイヤーフォックスですとCSSを認識してくれないようです。 下記が自分会社のソースです。 何が悪いのでしょうか？ よろしくお願いいたします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html lang="ja"> <head> <title></title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/JavaScript"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <SCRIPT language=javascript src="js/libs.js" type=text/javascript></SCRIPT> <meta name="ROBOTS" content="ALL"> <<link href="css/stylesheet.css" rel="stylesheet" type="text/css" media="all"> </head>
- 締切済み
- ネットトラブル
- ファイヤーフォックスでCSSが機能しません
会社のホームページを担当していて困っています。 ＩＥでは、きちんと表示されるのですが ファイヤーフォックスですとCSSを認識してくれないようです。 下記が自分会社のソースです。 何が悪いのでしょうか？ よろしくお願いいたします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html lang="ja"> <head> <title></title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/JavaScript"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <SCRIPT language=javascript src="js/libs.js" type=text/javascript></SCRIPT> <meta name="ROBOTS" content="ALL"> <<link href="css/stylesheet.css" rel="stylesheet" type="text/css" media="all"> </head>
- 締切済み
- ネットトラブル
お礼
上手く表示しました。。ありがとございました。