1:ID:aul.xz 1週間前

#質問 コーダーの方、フロントエンジニアの方、教えて下さい。テキストの前にアイコンがつくものってよくあると思います。例えば、こんな感じのもの。
□ テキスト
上の□を何らかのアイコンに置き換えて頂ければと。
こういうものをマークアップするときは、テキストの方のbefore擬似要素を使ってアイコンを表示させますか?それとも、単純にアイコン画像をsvgやimg、または、iみたいな要素使って表示させますか?

オススメの方法、メリットデメリットなど教えて下さい!

before擬似要素かiの背景にsvg画像使うのが良い気がしてきた。コンポーネントベースの再利用性考えると後者が良いのかな。

12 件のコメント

2:ID:9Go2DX 1週間前
Fontawesome使ってbefore属性設定すれば簡単かと
3:ID: 1週間前
Re:2
後出しで申し訳ないですが、ライブラリ依存しない前提での質問となります。
4:ID: 1週間前
<span>テキスト</span>

このspanのbeforeにアイコンつけるのは微妙ですよね?
5:ID:tvh2zj 1週間前
男は黙ってエスブイジースプライト
6:ID:YOKjmz 1週間前
<span class="ico-pdf">テキスト</span> みたいなふうにして、before疑似要素でsvgを表示させてますね。
7:ID:OY7dBJ 1週間前
コーダーはだまってびふおーでW
8:ID:xyHJbw 1週間前
たとえば、sketchを使うとタスクランナーと併用して、icon-font生成から(s)css作成までを自動化できるんだけど、その際に用いられる手法はだいたいこんな感じ。というか、sketchは関係ないけど。

[class*="icon-"]:before {
display: inline-block;
font-family: "icon";
line-height: 1;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.icon-check:before {
content: "\EA01"
}
.icon-search:before {
content: "\EA02"
}
9:ID: 1週間前
Re:8
オマエには訊いてない
10:ID:OY7dBJ 1週間前
Re:9
ナイスツッコミw
11:ID: 1週間前
Re:5
ありがとうございます。
12:ID: 1週間前
Re:7
参考になります。
13:ID: 1週間前
Re:6
ありがとうございます。
コメントの受付は終了しました。

一緒に読まれているつぶやき

ページ上部に戻る