2017-11-17 14 views
0

私のアイコンは実際に私のウェブページにありますが、私はまだそれを見ることはできません。アイコンはロードされていますが、表示されていません(html、css)

HTML

<i class="iconMan"></i> 

CSS

.iconMan{ 
    background-image: url(../../assets/imgs/iconMan.png); 
    display: block; 
    } 

これは私が得るものです:

enter image description here

アイコンは、 "テストユーザー" の隣にする必要がありますが、それは示していません。私はすでに高さと幅の調整を試みたが、うまくいかなかった。 私は何をすることができますか?

+1

画像へのパスが正しいことを確認してください。固定の幅と高さを与え、背景の位置を中央に、背景のサイズを含むように設定してみてください。コンソールのスクリーンショットはレンダリングされたスタイルを見るのがいいでしょう。 –

答えて

1

にこれを入れていきます推測この

<img src="/assets/imgs/iconMan.png" 

のようにやってみてくださいスタイリングを::afterまたは::before疑似セレクタに移動します。

.iconMan { 
    display: inline-block; 
} 

.iconMan::before { 
    content: url(../../assets/imgs/iconMan.png); 
} 
1

あなたが引用符

.iconMan{ 
    background-image: url("../../assets/imgs/iconMan.png"); 
    display: block; 
    } 
+0

引用符は、ここのURLではオプションです。 https://www.w3.org/TR/css-backgrounds-3/ –

+0

私もこれを試しましたが、これは問題だとは思いません。引用符を入れずにアイコンを表示することもできます(私は開発者ツールのネットワークタブをチェックして200のバックを取得しました) – BlueCat

-1

を逃したが、私はそれが はちょうどあなたができるアイコンを表示するためのHTMLコード

+0

あなたは何を達成したいのですか?そして、問題を見て簡単に解決策を提案するために他人がコンパイルできるMWEを追加することが最善です。 – Karlo

関連する問題