纯 CSS 按钮图标
按钮是最常见的 UI 元素之一。它们使用户可以与系统交互并通过选择来采取行动。为了使按钮更加用户友好,我们可以在按钮上放置图标。纯 CSS 不附带图标,有很多图标包可以在纯 CSS 中使用。在本文中,我们将使用字体真棒图标。要在按钮上包含图标,请在按钮元素的纯按钮类中使用 元素。
纯 CSS 按钮图标类:没有预定义的图标类,您可以将 font awesome 图标放在按钮元素之间,就像我们以前放在普通 html 中一样
Font Awesome Icons: Font-awesome 是一个 Web 图标库,为您提供可缩放的矢量图标,可以根据颜色、大小和更多方面进行自定义。
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
句法:
注意:要了解更多关于纯 CSS 图标和纯 CSS 按钮的信息,请点击链接文章。
例子:
HTML
Geeksforgeeks
Pure CSS Button Icons
输出: