Q&A
「sign-out-alt」が提示されたHTMLの中にありませんが、どこに入れるのでしょうか。
Font Awesomeのアイコンを使ってinputタグにアイコンを設定しましたが表示が崩れてしまいます。
コードは以下のようになっています。
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org/" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" xmlns:sec="http://www.thymeleaf.org/extras/spring-security"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="/css/bootstrap.min.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous"> <title>共通レイアウト</title> </head> <body> <nav class="navbar navbar-expand-lg navbar-light bg-light mb-3"> <a href="/" class="navbar-brand">一覧に戻る</a> <div> <span class="navbar-text" sec:authorize="isAuthenticated()"> <!-- ログインユーザID: <span sec:authentication="name"></span> --> <i class="far fa-user"></i><span sec:authentication="name"></span> </span> </div> <ul class="navbar-nav"> <li class="nav-item" sec:authorize="!isAuthenticated()"> <a href="/login" class="nav-link"><i class="fas fa-sign-in-alt"></i></a> </li> <li class="nav-item" sec:authorize="isAuthenticated()"> <form th:action="@{/logout}" method="post" class="form-inline"> <input type="submit" value="" class="btn"> </form> </li> <li class="nav-item"> <a href="/needLogin/cart" class="nav-link"><i class="fas fa-shopping-cart"></i></a> </li> </ul> <!-- <a href="/needLogin/cart" class="navbar-brand">カート</a> <div class="icon-test"> <i class="fas fa-shopping-cart" href="/needLogin/cart"></i> </div> --> <!-- <form th:action="@{/needLogin/cart}" method="get" sec:authorize="isAuthenticated()"> <div class="navbar-text"> <input type="hidden"> <input type="submit" value="" class="fas" style="border:none; background-color: transparent;"> </div> </form> --> </nav> <div class="container-fluid"> <div layout:fragment="contents"></div> </div> </body> </html>
ブラウザ上では以下のようになっています。
本来のアイコンの形は以下のようになっています。
念のためアイコンのURLも張っておきます。
logoutアイコンリンク
拙い状況説明で分かりづらいところもあるかもしれませんが、
ご回答いただけますと幸いです。
下記のコード中のvalue=""が「sign-out-alt」です！
<form th:action="@{/logout}" method="post" class="form-inline">
<input type="submit" value="" class="btn">
</form>
回答1件
ベストアンサー
あなたの回答
tips
プレビュー
