使用CSS字體圖標制作漂亮的按鈕
Sublime編纂器
HTML+CSS方式/步調
- 1
編寫按鈕所用的HTML代碼，并為其添加對應的類名，代碼如下所示：
- 2
按鈕的圖標是用字體實現的，是以我們要利用@font-face引入外部字體，注重本代碼中自界說的字體名稱，具體代碼如下所示：
- 3
設置按鈕的全局樣式，代碼如下：
- 4
別離為每一個按鈕設置零丁的樣式，代碼如下所示：
- 5
為span標簽設置我們在2步設置好的自界說字體名稱，代碼如下所示：
- 6
利用偽元素為兩個span添加內容，這里申明一下，分歧的內容會對應分歧的標記和符號，代碼如下圖所示：
- 7
打開瀏覽器預覽一下吧，結果是不是很炫？脫手嘗嘗吧
- 發表于 2019-08-14 22:24
- 閱讀 ( 835 )
- 分類：其他類型
admin
0 篇文章
作家榜 ?
-
xiaonan123
189 文章
-
湯依妹兒
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
華志健
23 文章