デザインはきちんとデザイナーがコントロールすべし、とは思っていても予算や時間の関係でそうも行かないことが多い。
そういう時、流行のフラットデザインならばbootstrap, fontawesomeなどを活用すると大幅に手間が省け、そこそこ格好が付く。
WEBデザインで非常に手間がかかるのがアイコン類の調達・作成・調整などだが、fontawsome等を組み込むとあったいう間に可愛いアイコンを並べられるので面倒な作業が楽しくなる。
これはhtmlに仕込むのは<i class=”fa fa-xxx”></i>などと入れればいいので非常に簡単だ。
しかし、むしろcssに仕込みたい場合がある。beforeやafterとの組み合わせで、リストマークのようなものを付けたり、と言ったことが簡単に出来そうだ。特にWPのカスタムメニュー等、決まったマークアップが出力される場合に有効だ。
ところが、cssに
content: ‘<i class=”fa fa-xxx”></i>’;
などとやっても無駄だ。htmlタグや実体参照などは受け付けない。この場合はunicode指定とすることで、ちゃんと表示される。
li{
content: “\f0da”;
font-family: FontAwesome;
}
ただこの場合、当然のことながらアイコンと文字の間隔の微妙な調整などは難しい。またaリンクなどに付けた場合、文字列の一部なのでこの部分もリンク領域になってしまう。
あくまでも、そういったこだわりが必要で無い場合に限っての用法となる。
コメント