質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
Cloud9

Cloud9は、クラウドからのプログラミングが可能になるWebサービス。IDEとしての機能が搭載されており、GitHubやHerokuなど他ツールとの連携も可能です。ブラウザ上で動くため、デバイスに関係なく開発環境を準備できます。

Ruby on Rails 3

Ruby on Rails3はRubyによって書かれたオープンソースのウェブフレームワークです。Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

font

近年は、コンピュータ上、紙面上で利用できる書体データのことをfontといいます。数える時の単位は「書体」で、データとしてのフォントは、デジタルフォントと呼ばれる場合があります。 HTML/CSSでは要素を指定し、フォント情報を調整することができます。

解決済

Fontawesomeアイコンを表示したい

pi-nattu
pi-nattu

総合スコア61

Cloud9

Cloud9は、クラウドからのプログラミングが可能になるWebサービス。IDEとしての機能が搭載されており、GitHubやHerokuなど他ツールとの連携も可能です。ブラウザ上で動くため、デバイスに関係なく開発環境を準備できます。

Ruby on Rails 3

Ruby on Rails3はRubyによって書かれたオープンソースのウェブフレームワークです。Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

font

近年は、コンピュータ上、紙面上で利用できる書体データのことをfontといいます。数える時の単位は「書体」で、データとしてのフォントは、デジタルフォントと呼ばれる場合があります。 HTML/CSSでは要素を指定し、フォント情報を調整することができます。

1回答

0リアクション

0クリップ

243閲覧

投稿2022/08/25 15:15

編集2022/08/26 00:38

前提

  • 本のタイトルと感想を投稿できるアプリケーションを作成中です
  • CSSのフォルダはいじらずにすべてHTMLで処理(カリキュラムの課題要件のため)

実現したいこと

  • Fontawesomeを使ってアイコンを表示させたい
  • アイコンもリンクに含ませたい

発生している問題

  • アイコンが表示されているものもあればなぜか表示されていないものもある
  • アイコンとテキストを色も白で統一したいが、Homeのアイコンのみ白になっている。
  • Log out、About、Login、Signupに至ってはテキストは出ているものの、アイコンの表示すらされていません(本当になぜ...?)
  • Homeアイコン以外は黒、テキストも青いままなので白に変えたいです

該当のソースコード

ruby

<!DOCTYPE html> <html> <head> <title>Bookers2Ver2</title> <%= csrf_meta_tags %> <%= csp_meta_tag %> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> </head> <body> <header> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container"> <a class="navbar-brand" href="https://bookers-level2.herokuapp.com"> <span>Bookers</span> </a> <!-- ハンバーガーアイコン --> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavDropdown"> <ul class="navbar-nav ml-auto fa-ul"> <% if user_signed_in? %> <li> <i class="fas fa-home"></i> <%= link_to 'Home', user_path(current_user.id) %> </li> <li> <i class="fas fa-users"></i> <%= link_to 'Users', users_path %> </li> <li> <i class="fas fa-book-open"></i> <%= link_to 'Books', books_path %> </li> <li> <i class="fas fa-sign-out-alt"></i> <%= link_to "Log out", destroy_user_session_path %> </li> <% else %> <li> <i class="fas fa-home"></i> <%= link_to "Home", root_path %> </li> <li> <i class="fas fa-link"></i> <%= link_to 'About', home_about_path %> </li> <li> <i class="fas fa-user-plus"></i> <%= link_to "Sign up", new_user_registration_path %> </li> <li> <i class="fas fa-sign-in-alt"></i> <%= link_to "Log in", new_user_session_path %> </li> <% end %> </ul> </div> </div> </nav> </header> <main class="mb-auto"> <%= flash[:notice] %> <%= yield %> </main> <footer> <p id="notice"></p> <div class="container mt-5"> <div class="row"> <div class="mx-auto"> <p>CopyRight Infratop.inc</p> </div> </div> </div> </footer> </body> </html>

試したこと

いろいろ調べてSpanタグで囲ってみたり、 以下のように記述もしてみたのですがだめでした。

ruby

<i class="fas fa-home" style="color:white;"></i>

補足情報(FW/ツールのバージョンなど)

Fontawesomeは5.15.4を使用
(ただ、Bookのアイコンが本を開いているものなのに表示されているのは閉じているものであったりしているので設定がうまくいってない可能性もあるかもしれません)

念のため、js,scssも記載
(カリキュラム通りに行っているのでおそらく問題ないとは思うのですが...)

application.scss

@import '~bootstrap/scss/bootstrap'; @import '~@fortawesome/fontawesome-free/scss/fontawesome';

application.js

import Rails from "@rails/ujs" import Turbolinks from "turbolinks" import * as ActiveStorage from "@rails/activestorage" import "channels" import "jquery"; import "popper.js"; import "bootstrap"; import "../stylesheets/application" import '@fortawesome/fontawesome-free/js/all' Rails.start() Turbolinks.start() ActiveStorage.start()

以下見本と問題箇所。ログイン前の画面。
イメージ説明

以下追記1

cloud9

=> Booting Puma => Rails 6.1.6.1 application starting in development => Run `bin/rails server --help` for more startup options Puma starting in single mode... * Puma version: 5.6.4 (ruby 3.1.2-p20) ("Birdie's Version") * Min threads: 5 * Max threads: 5 * Environment: development * PID: 7626 * Listening on http://127.0.0.1:8080 * Listening on http://[::1]:8080 Use Ctrl-C to stop Started GET "/" for 106.150.140.40 at 2022-08-26 00:29:02 +0000 Cannot render console from 106.150.140.40! Allowed networks: 127.0.0.0/127.255.255.255, ::1 (1.4ms) SELECT sqlite_version(*) (0.8ms) SELECT "schema_migrations"."version" FROM "schema_migrations" ORDER BY "schema_migrations"."version" ASC Processing by HomesController#top as HTML Rendering layout layouts/application.html.erb Rendering homes/top.html.erb within layouts/application Rendered homes/top.html.erb within layouts/application (Duration: 4.6ms | Allocations: 621) [Webpacker] Everything's up-to-date. Nothing to do Rendered layout layouts/application.html.erb (Duration: 22.9ms | Allocations: 3551) Completed 200 OK in 48ms (Views: 30.6ms | ActiveRecord: 0.0ms | Allocations: 7521) Started GET "/" for 106.150.140.40 at 2022-08-26 00:29:05 +0000 Cannot render console from 106.150.140.40! Allowed networks: 127.0.0.0/127.255.255.255, ::1 Processing by HomesController#top as HTML Rendering layout layouts/application.html.erb Rendering homes/top.html.erb within layouts/application Rendered homes/top.html.erb within layouts/application (Duration: 0.7ms | Allocations: 341) [Webpacker] Everything's up-to-date. Nothing to do Rendered layout layouts/application.html.erb (Duration: 6.8ms | Allocations: 2853) Completed 200 OK in 11ms (Views: 10.1ms | ActiveRecord: 0.0ms | Allocations: 4298) Started GET "/home/about" for 106.150.140.40 at 2022-08-26 00:29:46 +0000 Cannot render console from 106.150.140.40! Allowed networks: 127.0.0.0/127.255.255.255, ::1 Processing by HomesController#about as HTML Rendering layout layouts/application.html.erb Rendering homes/about.html.erb within layouts/application Rendered homes/about.html.erb within layouts/application (Duration: 0.9ms | Allocations: 129) [Webpacker] Everything's up-to-date. Nothing to do Rendered layout layouts/application.html.erb (Duration: 6.3ms | Allocations: 2120) Completed 200 OK in 13ms (Views: 12.7ms | ActiveRecord: 0.0ms | Allocations: 2777) Started GET "/users/sign_up" for 106.150.140.40 at 2022-08-26 00:30:30 +0000 Cannot render console from 106.150.140.40! Allowed networks: 127.0.0.0/127.255.255.255, ::1 Processing by Devise::RegistrationsController#new as HTML Rendering layout layouts/application.html.erb Rendering devise/registrations/new.html.erb within layouts/application Rendered devise/shared/_error_messages.html.erb (Duration: 1.1ms | Allocations: 275) Rendered devise/shared/_links.html.erb (Duration: 1.7ms | Allocations: 610) Rendered devise/registrations/new.html.erb within layouts/application (Duration: 22.3ms | Allocations: 5658) [Webpacker] Everything's up-to-date. Nothing to do Rendered layout layouts/application.html.erb (Duration: 27.4ms | Allocations: 7672) Completed 200 OK in 42ms (Views: 31.3ms | ActiveRecord: 0.6ms | Allocations: 15518) ^C- Gracefully stopping, waiting for requests to finish === puma shutdown: 2022-08-26 00:30:47 +0000 === - Goodbye! Exiting

追記2(コンソール上のエラー)

コAutofocus processing was blocked because a document already has a focused element. DevTools failed to load source map: Could not load content for https://41bba7c5241c4e8a8ab9eab04d92f21a.vfs.cloud9.ap-northeast-1.amazonaws.com/packs/js/application-de10aaf691dd43e39fc5.js.map: HTTP error: status code 503, net::ERR_HTTP_RESPONSE_CODE_FAILURE

かれこれ5時間以上は試行錯誤して詰まっているので切実に困っています...ご協力お願いいたします。

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

m.ts10806

2022/08/25 22:04

見本もRailsなのでしょうか。 いずれにしてもRuby on Railsの質問タグも必要に思います。
pi-nattu

2022/08/25 23:45

失礼しました。 早速修正いたしました。 見本もRubyになります。
maisumakun

2022/08/26 00:24

ブラウザのコンソールにエラーは出ていませんか?
pi-nattu

2022/08/26 00:45

追記2にて記載しました。 要素が重複している?感じですかね...?
pi-nattu

2022/08/27 14:47

自己解決できました。 お二方ともアドバイス・質問していただきありがとうございました!

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Cloud9

Cloud9は、クラウドからのプログラミングが可能になるWebサービス。IDEとしての機能が搭載されており、GitHubやHerokuなど他ツールとの連携も可能です。ブラウザ上で動くため、デバイスに関係なく開発環境を準備できます。

Ruby on Rails 3

Ruby on Rails3はRubyによって書かれたオープンソースのウェブフレームワークです。Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

font

近年は、コンピュータ上、紙面上で利用できる書体データのことをfontといいます。数える時の単位は「書体」で、データとしてのフォントは、デジタルフォントと呼ばれる場合があります。 HTML/CSSでは要素を指定し、フォント情報を調整することができます。