簡體   English   中英

在CSS中制作自定義項目符號

[英]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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM