rails:hamlのliタグ内にfontawesomeを導入できない

現在自作アプリを開発中で、スノボー版インスタグラムみたいなアプリを作っています。

質問内容ですが、イメージ画像の下にある
・snowB詳細ページ
・snowB編集ページ
・snowBを削除する

これらの文字の左にfontawesomeのアイコンを実装しようと考えています。

しかし、以下の9行目にあるように記述したら構文エラーが出てしまいます。
show.html.haml

haml
1.mypage-post-boxes
2  - @user.posts.each do |post|
3    .mypage-post-box
4      .mypage-post-box__image
5        = attachment_image_tag post, :image, size: "420x340"
6      .mypage-post-box__contents
7        %ul
8          %li= link_to "snowB詳細ページ", post_path(post) do
9            = icon ('fas', 'snowboarding')
10          %li= link_to "snowB編集ページ", edit_post_path(post)
11          %li= link_to "snowBを削除する", post_path(post), method: :delete, data: {confirm: "削除しますか？"}
12          %li= post.updated_at.strftime("%Y-%m-%d %H:%M")

エラー文の内容は構文エラーで、無効なネストとありました。

##試したこと
ネストが無効なため、インテンドをずらして反映されるかチェックしました。
→liタグ配下でなければ、フォントオーサムは反映されます。

fontawesomeのgemやapplication.scssに@import記述するのはすでにやっています。

ホーム画面のタイトルには、fontawesomeは反映されているので、単純に上記のコードに誤りがあると認識しています。

・タイトルのfontawsome

html
1  .title-menu
2    .title-menu__icon
3      = link_to root_path do
4        = icon('fas', 'snowboarding')

liタグの下にspanタグを用いて実装しようとしましたが、同じく構文エラーと出ます

haml
1%li= link_to
2  %span= icon()

現状はこんな感じです。
liタグ内にfontawesomeのアイコンを表示させるにはどうすればいいでしょうか？

m.ts10806

2020/06/23 13:35

＞liタグ配下でなければ、フォントオーサムは反映されます。＞ホーム画面のタイトルには、fontawesomeは反映されているのでブラウザに出力されたHTMLを見比べてみたのでしょうか。

susume

2020/06/23 13:53

ブラウザに出力されたHTMLには、・タイトルでは、div>a>iとなっています・質問のページでは、li配下でなければ、当然liタク外にiがあります

行動規範の内容に同意します

回答1件

ベストアンサー

%li= link_to "snowB詳細ページ", post_path(post) do = icon ('fas', 'snowboarding')
とありますが、link_toの二種の構文が混在してるのが原因です。
do が有るときは
%li= link_to post_path(post) do = "snowB詳細ページ" = icon ('fas', 'snowboarding')
haml詳しくないので、、、、
= "snowB詳細ページ"　はもっとスマートに出来るでしょう。

投稿2020/06/25 06:56

winterboum

総合スコア23567

rhiroe

2020/06/25 07:19 編集

link_toの構文については回答の通りだと思うんですが、エラーの内容が多分hamlのものなのでhaml自体の構文もダメなんでしょうね。 haml使わないんでアレなんですけど、slimと同じであるならば %li 　= link_to post_path(post) do 　　= "snowB詳細ページ" 　　= icon ('fas', 'snowboarding') こうでしょうね。