0

今のところ、私のボタンはアイコンフォントを使用しています。アイコンフォントを削除したいのですが、代わりに画像を使用してください。

これは私のコードがどのように見えるかです

.zocial::before {
content: "";
/* some code goes here */
}
.zocial.plus::before {
content: "p";
}

デモを表示するためにjsfiddleを作成しました。ここをクリックして表示してください

ご覧のとおり、ボタンにはアイコンフォント（p）と検索アイコンの両方があります。

次に、その「p」文字を削除して、検索アイコンをそこに移動します。

よろしくお願いします。

ありがとう

4

4 に答える 4

3

これを試してみてください。

.zocial.plus::before {
    content: "\0000a0";
    background: url("http://twitter.github.com/bootstrap/assets/img/glyphicons-halflings-white.png") -48px 8px no-repeat;
}

ここにフィドルがあります：http： //jsfiddle.net/VJsHb/

于 2013-01-22T21:09:10.523 に答える
2

それ以外の

content:"p"

使用できます

content: url("http://twitter.github.com/bootstrap/assets/img/glyphicons-halflings-white.png");

もちろん、正しい画像で。

よろしく

于 2013-01-22T21:14:58.430 に答える
0

私がリストで使用したもののほんの一例です。これを試して、ソリューションに適合させてください。

<div class="Info">
    <ul>
    <li>Text here</li>
    <li>Text here</li>
    <li>Text here</li>
    <li>Text here</li>
    </ul>
</div>

.Info ul li
{
padding-bottom:10px;
list-style-type:none; /* Switch the list bullet off altogether. */
background-image:url("images/yourImage.png"); /* The replacement bullet image */
background-position:0px 2px; /* Place bullet 0px from left and 4px from top */
background-repeat:no-repeat; /* Stops bullet tiling, important */
padding-left:22px; /* separation from li txt and bullet */

}
于 2013-01-22T20:58:37.700 に答える
0

次のようなものを使用できます。

content: url("url/to/image.png");

:beforeまたは、要素の場合と同じように、セレクターで背景を作成します。

.zocial.plus::before {
    background-image: url("url/to/image.png");
}
于 2013-01-22T21:04:10.730 に答える