ul、liのドット部分をアイコンでリスト化する方法
wordpress
ulやolで箇条書きにする際に､ドットや数字の代わりにアイコンを使いたい時ってありますよね。しかし､CSSでコードを書いていくのは難しいからできないなとお悩みの方は必見です。
アイコンでリスト化するまでの工程を紹介しています。簡単に済ませたい人はコピペもできますので、ご覧いただけたらと思います。
このようなリストが作れます
- テキストテキストテキスト
- テキストテキストテキスト
- テキストテキストテキスト
- テキストテキストテキスト
- テキストテキストテキスト
- テキストテキストテキスト
アイコンを使ったリストの作り方
いかがでしたでしょうか？そんなに難しくなかったと思います。
位置や大きさは設定している値を変えるだけで好みのレイアウトを設定できますので、ご自分でカスタムも可能だと思います。
使用したCSSコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.test { list-style: none; } .test li { position: relative; padding-left: 25px; } .test li:before { content: '\f046'; color: #ff0000; font-family: 'FontAwesome'; position: absolute; left: -5px; top: 3px; font-size: 1.5em; line-height: 1 } |
テーマによってレイアウトが異なりますので、liにpaddingを追加して調整したり、アイコンの位置やサイズをleft、top、font-sizeで調整してみて下さい。
まとめ
以上でアイコンを使いリスト化する方法について説明しました。ドットをアイコンで表現できれば、ブログやサイトの表現力が高まると思いますので、ぜひ、参考にしていただけたらと思います。
合わせて見たい記事
ブログを書いて、強く訴えたい部分ってありますよね。目立たせたいけどどうすればいいか悩みますよね。私もその内の一人でなにか良い方法ないかなって考えていたところ、ワンクリックでテキストにアイコン付き背景を挿入する方法がわかりましたので、ご紹介します。ぜひ、ご覧になり役立っていただけたら...
当記事を見ていただければ、今回使用したFont Awesomeサイトのアイコンの使い方やAddQuicktagを使いワンクリックで入力する方法が解説してありますので、参考になると思います。
本気でプログラミングを学んで、HPを作りたいとか、スマホアプリを作りたいとか、転職して別の道に進みたいと考えている人へ、最短で習得する為にはスクールを利用することをおすすめしたいと思います。
なぜなら、私はwebと関係ない世界から今はこうやってブログを書いていますが、初めは独学で勉強して...
この記事が気に入ったら
いいね！しよう
最新情報をお届けします
Twitterでshare lifeをフォローしよう！
Follow share life