1:ID:aul.xz · 2017-09-12

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

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

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

12 件の回答

2:ID:9Go2DX · 2017-09-12

Fontawesome使ってbefore属性設定すれば簡単かと

3:ID: · 2017-09-12

Re:2
後出しで申し訳ないですが、ライブラリ依存しない前提での質問となります。

4:ID: · 2017-09-12

<span>テキスト</span>

このspanのbeforeにアイコンつけるのは微妙ですよね?

5:ID:tvh2zj · 2017-09-12

男は黙ってエスブイジースプライト

6:ID:YOKjmz · 2017-09-12

<span class="ico-pdf">テキスト</span> みたいなふうにして、before疑似要素でsvgを表示させてますね。

7:ID:OY7dBJ · 2017-09-12

コーダーはだまってびふおーでW

8:ID:xyHJbw · 2017-09-12

たとえば、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: · 2017-09-12

Re:8
オマエには訊いてない

10:ID:OY7dBJ · 2017-09-12

Re:9
ナイスツッコミw

11:ID: · 2017-09-12

Re:5
ありがとうございます。

12:ID: · 2017-09-12

Re:7
参考になります。

13:ID: · 2017-09-12

Re:6
ありがとうございます。

コメントの受付は終了しました。

一緒に読まれている質問

ページ上部に戻る