前提・実現したいこと
リンク用テキストは記述せずにFont awesomeのアイコン(Homeの絵)に直接リンクを張り、トップページの戻りをhomeアイコンを直接押せば戻るようにしたいです。よろしくお願いいたします。
発生している問題・エラーメッセージ
Font awesomeの<i class="fas fa-home"></i>を直接HTMLに記述すれば上手くいくのですが、何故か勝手に消えたりするので、CSSで作成したいのですが上手くできません。また、書き方が悪いと思うのですがアイコンが表示しません。
該当のソースコード
HTML
1 2<!DOCTYPE html> 3<html lang="ja"> 4<head> 5<meta charset="UTF-8"> 6<title></title> 7<link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet"> 8<style> 9<!-- 10.homeic{ 11 font-family: "Font Awesome 5 Free"; 12 content: "\f015"; 13 font-weight: 900; 14} 15 16--> 17</style> 18</head> 19<body> 20<ul> 21<li><a href="index.html"><i class="fas fa-home"></i></a></li> 22</ul> 23</body> 24</html>ソースコード
試したこと
上記のソースでは上手く表示しますが、
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet"> <style> <!-- .homeic{ font-family: "Font Awesome 5 Free"; content: "\f015"; font-weight: 900; }-->
</style>
では表示しません。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
コードブロックは任意数設置できるので(テンプレートはあくまでテンプレート)
コードは基本的に全てコードブロック(コード選択して<code>ボタン)でご提示ください。
>何故か勝手に消えたりするので
手元で確認しましたが、消えませんよ。
消えるのは、某HP作成用ソフトです。
.homeic{
font-family: "Font Awesome 5 Free";
content: "\f015";
font-weight: 900;
}
で作成する方法は何かありませんでしょうか?
「某」というのはよろしくないかと。
通常の使用で消えるようなことはないので、むしろちゃんとソフト名を出して言及したほうがプログラミング界隈のためにはなります。
消える現象は確かにありますがスミマセンが、お聞きしたいのはFont Awesome 5 をcssで作成することがお聞きしたいです。私は、HPを作成し始めたものです。当然回答される方のようなスキルは有りません。Font Awesome 5 を利用したcssの回答ができる方どなたかお願いします。
”消える”という現象が起きないものを回答しろというのは難しい話です。(スキルの問題じゃないですよ)
#(無理→難しい)に変更しました。
回答1件
あなたの回答
tips
プレビュー