ウェブエンジニアのメモエディタ

サブURL(このURLからもアクセスできます):http://nishinomiya.areablog.jp/engineer

タイトルなどの文字の前にアイコンを表示させる2パターン

タイトルなどの文字の前にアイコンを表示させる2パターン

ブロックにアイコンを設置する方法



例えば、span要素を文字の前にデザインしたアイコンを設置する場合。


<span>ここにたいとる</span>


ここにタイトルの左側にアイコンを表示させて可愛く、またはかっこ良くしたい。


<span><img src=\"icon.png\"/>ここにタイトル</span>


これは全部をHTMLで解決させるパターン。

もう一つは、
span::before {
content:"";
width:15px;
height:15px;
background:url("icon.png");
margin-right:15px;
float:left;
}
とするパターン。
このcssで定義するパターンはできればもっとスパートにしたいので良い方法があればまたメモしようと思います。


ウェブサイト制作メモ

goodポイント: 0ポイント

このポストをお気に入りに追加 0人がお気に入り登録中
このポストのURL http://nishinomiya.areablog.jp/blog/1000104703/p11159522c.html
ウェブデザインめも | コメント( 0 ) | トラックバック( 0)
名前   削除用パス  
コメント
※入力可能文字数は1000文字です

■同じテーマの最新記事
サイト制作メモ:Bootstrapのグリッドレイアウトをより使いやすく!
  1  |  2  |  3  
このブログトップページへ
ブログイメージ
show2g@しょうじ
プロフィール公開中 プロフィール
たぶんこんな技術的メモを書くと思います↓
HTML・CSS・JS・PHP・Wordpress・AWS
Photoshop・Illustrator・AfterEffects・Premier・Audition・Bridge
Camera・Movie

今日 合計
ビュー 1 496
コメント 0 0
お気に入り 0 0