Twitter Bootstrap2.3.1でアイコンを白抜きに指定します。
【準備】
1.「Twitter Bootstrap2.3.1の使用方法」の手順の通り、Twitter Bootstrapを配置しておきます。
【手順1】
1.HTMLファイル「index.html」(任意)を作成。
2.「index.html」を以下の様に入力。
<!DOCTYPE html> <html> <head> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" /> </head> <body style="background-color:black;"> <i class="icon-star icon-white" /><br /> <i class="icon-heart icon-white" /><br /> <i class="icon-envelope icon-white" /><br /> <script src="http://code.jquery.com/jquery.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> </body> </html>※指定するアイコン名はIcons by Glyphiconsを参考にして下さい。
【手順2】
1.各クラスは以下の様に定義されていました。
.icon-white, .nav-pills > .active > a > [class^="icon-"], .nav-pills > .active > a > [class*=" icon-"], .nav-list > .active > a > [class^="icon-"], .nav-list > .active > a > [class*=" icon-"], .navbar-inverse .nav > .active > a > [class^="icon-"], .navbar-inverse .nav > .active > a > [class*=" icon-"], .dropdown-menu > li > a:hover > [class^="icon-"], .dropdown-menu > li > a:focus > [class^="icon-"], .dropdown-menu > li > a:hover > [class*=" icon-"], .dropdown-menu > li > a:focus > [class*=" icon-"], .dropdown-menu > .active > a > [class^="icon-"], .dropdown-menu > .active > a > [class*=" icon-"], .dropdown-submenu:hover > a > [class^="icon-"], .dropdown-submenu:focus > a > [class^="icon-"], .dropdown-submenu:hover > a > [class*=" icon-"], .dropdown-submenu:focus > a > [class*=" icon-"] { background-image: url("../img/glyphicons-halflings-white.png"); }
【手順3】
1.ブラウザで「index.html」を開き、以下の様に表示されれば成功です。
以上です。
0 件のコメント:
コメントを投稿
注: コメントを投稿できるのは、このブログのメンバーだけです。