CSS3是一種非常強大的標記語言,可以用來制作各種炫酷的效果,其中之一就是制作Icon(圖標)。
在CSS3中,可以使用偽元素來制作Icon,例如:
.icon-home::before { content: "\e900"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-style: normal; } .icon-heart::before { content: "\f004"; font-family: "Font Awesome 5 Free"; font-weight: 400; font-style: normal; }
其中,::before
是CSS3偽元素,用于在元素的前面插入內容。content
屬性用于設置插入的內容,可以是文字、圖片、計數器等。這里使用了Unicode字符來顯示Icon(可以通過在線工具來獲取Unicode字符)。
同時,需要設置字體的相關屬性,使用font-family
屬性設置字體(這里使用的是 Font Awesome 字體),font-weight
屬性設置字體的粗細程度,font-style
設置字體的風格(正常、斜體等)。
通過設置好以上屬性,我們就可以輕松地在網站中使用這些Icon了。