使用CSS字体图标制作漂亮的按钮
Sublime编纂器
HTML+CSS方式/步调
- 1
编写按钮所用的HTML代码，并为其添加对应的类名，代码如下所示：
- 2
按钮的图标是用字体实现的，是以我们要利用@font-face引入外部字体，注重本代码中自界说的字体名称，具体代码如下所示：
- 3
设置按钮的全局样式，代码如下：
- 4
别离为每一个按钮设置零丁的样式，代码如下所示：
- 5
为span标签设置我们在2步设置好的自界说字体名称，代码如下所示：
- 6
利用伪元素为两个span添加内容，这里申明一下，分歧的内容会对应分歧的标记和符号，代码如下图所示：
- 7
打开浏览器预览一下吧，结果是不是很炫？脱手尝尝吧
- 发表于 2019-08-14 22:24
- 阅读 ( 810 )
- 分类：其他类型
admin
0 篇文章
作家榜 »
-
xiaonan123
189 文章
-
汤依妹儿
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
华志健
23 文章