主にリストやリンクなどのワンポイントアイコン系の画像をどう実装するかについて。
list-style
list系ならばもっとも簡単に実装。
html
|
1 |
<li>・・・</li> |
css
|
1 2 3 |
li{ list-style:url(画像のパス) } |
background-image
一番応用はききやすいかも。
html
|
1 |
<li>・・・</li> |
css
|
1 2 3 4 5 |
li{ padding:5px 0 0 40px; list-style:none; background:url(パス) no-repoeat } |
パターン2
たとえばアイコンマークのある入力欄
html
|
1 |
<input type="text" name="search"> |
css
|
1 2 3 4 5 6 7 |
input[type="text"]{ boarder:3px solid #dedede; padding:10px 10px 10px 40px; width:300px; background:url(パス) 10px center no-repoeat; font-size:20px; } |
Font Awesome
※特定アイコンがあることが前提
|
1 2 3 |
<link rel="stylesheet" href="css/font-awecom.min.css"> ・・・・・・・ <i class="fa fa-hospital-o"></i> |
after
※リンク後のアイコンなど
html
|
1 |
<a href="">aaaa</a> |
css
|
1 2 3 4 5 6 |
a::after{ content:url(パス); magin-left:5px; position:relative; bottom:-1px; } |
