Q&A
何のアイコンをどのように出したいのでしょうか。
提示のコードではアイコンを出すところのコードがないように思います。
おそらくフロントエンドのみの問題なので、ブラウザの「ソースを表示」で取得できるHTMLを質問本文にご提示ください。
本来、右上にアイコンが出るようにコーディングしたいと思い、application.html.erb上に以下のようなコードを書いたのですが、反映されないのはどうしてでしょうか。よろしくお願いいたします。
html
1 2<!-- へッダやフッタなど共通して使用される部分を定義するページ --> 3<!-- 全体で共有するhtml.erbで、rails newで自動生成されるファイル --> 4<!DOCTYPE html> 5<html> 6 <head> 7 <title>CARAVAN</title> 8 <meta charset="utf-8"> 9 <meta name="csrf-param" content="authenticity_token" /> 10<meta name="csrf-token" content="nnqPjAyRh6bBx8MNT5hSbhHTbu6LIRxN/fNCFseLmF3cmYvYd4ZawLj5YWC134RayKLskaQXQg1HQwtCzD4YWA==" /> 11 12 13 <link rel="stylesheet" media="all" href="/assets/blogs.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" /> 14<link rel="stylesheet" media="all" href="/assets/application.self-8bc312fbd5212a07ce133d96554189deb341565bdf204628806bb3226874a153.css?body=1" data-turbolinks-track="reload" /> 15 <script src="/assets/rails-ujs.self-d109d8c5c0194c8ad60b8838b2661c5596b5c955987f7cd4045eb2fb90ca5343.js?body=1" data-turbolinks-track="reload"></script> 16<script src="/assets/activestorage.self-1ed4604ac2170045f1ffca4edb81a75246661555e4f9cf682bb8a21825e32e1c.js?body=1" data-turbolinks-track="reload"></script> 17<script src="/assets/turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1" data-turbolinks-track="reload"></script> 18<script src="/assets/blogs.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script> 19<script src="/assets/action_cable.self-69fddfcddf4fdef9828648f9330d6ce108b93b82b0b8d3affffc59a114853451.js?body=1" data-turbolinks-track="reload"></script> 20<script src="/assets/cable.self-8484513823f404ed0c0f039f75243bfdede7af7919dda65f2e66391252443ce9.js?body=1" data-turbolinks-track="reload"></script> 21<script src="/assets/application.self-66347cf0a4cb1f26f76868b4697a9eee457c8c3a6da80c6fdd76ff77e911715e.js?body=1" data-turbolinks-track="reload"></script> 22 23 24 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"> 25 <link rel="stylesheet" href="application.css"> 26 </head> 27 28 <body> 29 <header> 30 <h1 class="headline"> 31 <a href="/blogs">CARAVAN</a> 32 </h1> 33 <div class="social"> 34 <i class="fa fa-facebook-square"></i> 35 <i class="fa fa-twitter-square"></i> 36 <i class="fa fa-instagram"></i> 37 </div> 38</header> 39 40<nav> 41 <ul class="nav-list"> 42 <li class="nav-list-item"> 43 <a href="#">Home</a> 44 </li> 45 <li class="nav-list-item">About</li> 46 <li class="nav-list-item">Topic</li> 47 </ul> 48</nav> 49 50<div class="main-visual"> 51 <div class="main-visual-content"> 52 <p class="main-visual-text"> 53 The world is a book<br> 54 and those who do not travel<br> 55 read only one page. 56 </p> 57 <p class="main-visual-name"> 58 St. Augustine 59 </p> 60 </div> 61</div> 62 63<main class="clearfix"> 64 <section class="single-blog"> 65 <h2 class="blog-headline">Blog</h2> 66 <section class="blog-box"> 67 <h3 class="blog-box-headline"> 68 2 69 </h3> 70 <div class="blog-box-content"> 71 <p class="category"> 72 宇宙 73 </p> 74 <p class="blog-date"> 75 2019-01-10 09:08:18 UTC 76 </p> 77 </div> 78 <img class="single-image" src="/assets/img/forest-faf14705758c6cb45a63de8450df177db9182556513bd6048cc742cf18cffff4.jpg" /> 79 <p class="single-text"> 80 wow 81 </p> 82 <a class="edit-figure" href="/blogs/6/edit">編集</a> 83 <a class="destroy-figure" rel="nofollow" data-method="delete" href="/blogs/6">削除</a> 84 85 <div class="author-case clearfix"> 86 <div class="author-image"></div> 87 <div class="author-box"> 88 <p class="author-name">By JOHN SMITH / Photographer</p> 89 <p class="author-text">His black and white landscapes, often captured at times<br>of the day and night when the light is fleeting, or in poor<br>weather conditions, such as rain, fog, or snow, are<br>reminiscent of the calm in a storm all with an ethereal<br>quality. </p> 90 </div> 91 </div> 92 </section> 93 </section> 94 95 <div class="sidebar"> 96 <section class="popular"> 97 <h2 class="sidebar-headline">Popular</h2> 98 <div class="sidebar-contents"> 99 <p class="popular-text">To solve old problems,<br>study new species</p> 100 <p class="popular-text">Why Earth may someday<br>look like Mars</p> 101 <p class="popular-text">What will humans look<br>like in 100 years?</p> 102 <p class="popular-text">How to grow a forest<br>in your backyard</p> 103 <p class="popular-text">How humans could evolve<br>to survive in space</p> 104 </div> 105 </section> 106 <section class="instagram"> 107 <h2 class="instagram-headline">Instagram</h2> 108 <div class="sidebar-contents clearfix"> 109 <div class="instagram-box"></div> 110 <div class="instagram-box"></div> 111 <div class="instagram-box"></div> 112 <div class="instagram-box"></div> 113 <div class="instagram-box"></div> 114 <div class="instagram-box"></div> 115 </section> 116 <section class="categories"> 117 <h2 class="categories-headline">Categories</h2> 118 <div class="sidebar-contents"> 119 <p class="categories-text">Technology(15)</p> 120 <p class="categories-text">Business(23)</p> 121 <p class="categories-text">Entertainment(12)</p> 122 <p class="categories-text">Nature(32)</p> 123 <p class="categories-text">Education(9)</p> 124 <p class="categories-text">Adventure(23)</p> 125 <p class="categories-text">Communication(14)</p> 126 </div> 127 </section> 128 </div> 129</main> 130<footer> 131<p class="footer-text">© All rights recerved by Infratop.Inc.</p> 132</footer> 133 <!-- ↑各ビューの内容として別途作成されたhtmlファイルが読み込まれます --> 134 </body> 135</html>
回答ありがとうございます。
写真の左下にアイコンを出すコードを書いていると思うのですが、、、。
<header>
<h1 class="headline">
<%= link_to "CARAVAN", blogs_path %>
</h1>
<div class="social">
<i class="fa fa-facebook-square"></i>
<i class="fa fa-twitter-square"></i>
<i class="fa fa-instagram"></i>
</div>
</header>
以上が該当すると思われる場所のコードです。よろしくお願いいたします
ブラウザの「ソースを表示」で取得できるHTMLを質問本文にご提示ください。
提示しました。よろしくお願いいたします。
画像消えてませんか？
投稿前に画面右側のプレビュー確認してから投稿するようにしてください
承知いたしました。
回答2件
0
本件と直接は関係なさそうですが、CDNは最新のものをご利用ください。
あとはドキュメントとの格闘ですね。
指定もあるのでギャラリーから探すのも良いと思います。
新しい機能を試す場合、なるべく最小構成で試された方が良いと思います。
「ミニマムコードで試す｣です。
html
1<!DOCTYPE html> 2<html> 3 <head> 4 <title>CARAVAN</title> 5 <meta charset="utf-8"> 6 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> 7 </head> 8 <body> 9 <div class="social"> 10 <i class="fa fa-facebook-square"></i> 11 <i class="fa fa-twitter-square"></i> 12 <i class="fa fa-instagram"></i> 13 </div> 14 </body> 15</html>
ドキュメントに下記のような注記があります。
The fa prefix has been deprecated in version 5. The new default is the fas solid style and the fab style for brands.
Google翻訳まま：**faプレフィックスはバージョン5で廃止されました。**新しいデフォルトはブランドのfasソリッドスタイルとファブスタイルです。
つまり、現在のコードで使われている5.0時点で廃止されているものと思われます。
スタイルはアイコンに合わせてもらうとして、こんな感じですね。
html
1 2 <div class="social"> 3 <i class="fab fa-facebook-square"></i> 4 <i class="fab fa-twitter-square"></i> 5 <i class="fab fa-instagram"></i> 6 </div>
表示確認
投稿2019/03/26 07:19
編集2019/03/27 01:31総合スコア80850
絶対の自信があるというわけではないですが、
手元の環境で動作確認までした回答のどこが低評価なのでしょうか。
理由をコメントください。間違っている箇所があるのでしたら修正します。
申し訳ございません。低評価にした覚えは全くなく、今高評価を押させていただきました。
もし、僕が低評価押していたのであれば、この場を借りて謝罪します。申し訳ございません。
素早い回答ありがとうございました。
質問者さんを決して急かしたわけではないですが、高評価は投稿者本人のみ誰がしてくれたか見れますし、低評価残ってるので別の人だと思います。失礼しました。
１日にほぼ決まった回数つくので同じ人なのかなぁとは思ってます。
余程批判されてしかるべき内容ならともかく、そうでない回答への無言低評価は本当にたちが悪い（というか子供）
なるほど。こういうところにもそういった方がいるのですね、、。
はい。まあ時に悪目立ちしてますから、素直でない質問者さんの私怨を買うことはないわけではないです。
私は問題解決のちょっとした手助けができたらそれでいいと考えてるだけですしね。回答することで自身の知識技術の再確認と向上にもつながりますし。
書き忘れてましたが、質問者さんを疑っているわけでは最初からないです。
犯人探しをしたいわけではなく、回答に不備や悪いところがあればきちんと修正して正しい資産として残すべきと考えてますので。
まあこれしばらく様子みて無反応となれば回答内容への評価をしたわけではないと考えて間違いないですね。
>ちょっとした手助けができたら
これに付け加えると、内容次第で正しい技術・やり方を身につけてもらいたい、ですね（これ結構素直に聞いてくれる人少ないですが、聞かない人は大抵ずっと同じところでグルグル回ってて成長してません）
なるほど、、。
自分も頑張ります。
また何かの機会があればよろしくお願いいたします。
本題からだいぶ話それましたね（語りすぎました）失礼しました。
0
ベストアンサー
クラス指定がfaではなくfasでは？
【Font Awesome 5がリリースされたぞ！ - Qiita】
https://qiita.com/tamaina/items/4a0747bf20296e0aab15
faプレフィックスに代わり、種類ごとのプレフィックスfas,far,fal,fabになりました。
【facebook-square | Font Awesome】
https://fontawesome.com/icons/facebook-square?style=brands
投稿2019/03/26 07:03
総合スコア69407
あなたの回答
tips
プレビュー
