カイカブログ

フリーランスデザイナー カイカデザインのブログ
デザイン、html、wordpress等についてほとんど役に立たない単なる感想レベルのたわごとを綴っています

WEBフォントでつくるリストアイコンの調整方法

最近WEBフォント厨になりつつある僕です、こんにちは(誰)。
前回に引き続き、今回もFontAwesomeでの実践例です。

wordpressで<i>タグが入れられない、、そんな場合はcssのみで解決できます。

■html

■css

:beforeプロパティ大活躍!
表示は・・・

list-before-01

なんか惜しい

そうじゃねえんだよ!(デジャヴ)

WEBフォントアイコン様の下にまでリンク下線はいらん。
テキスト改行時にアイコンの下に回り込ませたくない。

list-before

落ち着けオレ! 頭を冷やしてよく考えてみろ!

うん、<a>じゃなくて<li>に:beforeを使えばリンク下線つかないよね(初歩的
しかし改行が相変わらずヒドイ。

いっそdisplay:boxで:beforeとaで囲まれているテキスト部分を並べてしまおうかと思ったけど、そういう使い道向きではなかったらしい。。
ここは安定の(?)floatさんに活躍してもらうのがベスト。

表示はこの下にある「さらに役立たない記事」欄でご確認くださいw

やはりfloatさんの安定感はパネえな。。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です