[英]Making a custom bullet in CSS
我有一個指向他們的個人資料的學生鏈接列表,所以我想要笑臉而不是普通的圓形要點。 圖片為14x14。 我該怎么做才能僅使用CSS來顯示項目符號?
ul {
list-style-type:url(smiley.tiff);
text-transform:capitalize;
}
使用CSS背景。 list-style-image
不能為您提供定位選項,並且通常看起來很糟糕。 為您的布局相應地調整像素值。
li.icon {
background-image:url(...);
background-repeat:no-repeat;
background-position:3px 3px;
min-height:16px;
padding-left:20px;
}
順便說一句-不要使用TIFF(並非所有瀏覽器都支持TIFF),文件可能很大。 將其隱藏為PNG。
請改用list-style-image CSS規則 。 並且,以防萬一,將網址括在引號中; 大多數瀏覽器在沒有它們的情況下都能正確解釋它,但這是一個好習慣。
list-style-image: url('smiley.tiff');
最簡單的方法是設置:
ul {
list-style-image: url(‘images/sample-bullet.png’)
}
這樣,您可以選擇任何想要的圖像。 有一個關於子彈的風格 ,我認為你可以從中受益一個偉大的文章在這里 。
只是簡單地使用awesome字體,使list-style:none並使用字體令人敬畏的圖標簡單Happy Coding:D
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.