带有 Font Awesome 图标的 Bulma Input
Bulma 是一个基于 flexbox 的免费开源 CSS 框架。它组件丰富、兼容且文档齐全。它本质上是高度响应的。它使用类来实现其设计。
带有字体真棒图标的布尔玛输入用于在输入字段中设置图标。字体真棒图标用于左侧或右侧或两侧。默认情况下,图标将显示在中心。
带有字体真棒图标类的布尔玛输入:
我们可以将两个修饰符之一添加到控件类布局中。
- has-icons-left:用于设置输入栏左侧的图标。
- has-icons-right:用于设置输入框右侧的图标。
句法:
在控件类布局上添加修饰符后,需要在图标上添加修饰符。
- icon is-left:使用has-icons-left时使用该类。
- icon is-right:使用has-icons-right时使用该类。
句法:
例子:
HTML
Bulma Input with Font Awesome icons
GeeksforGeeks
Bulma Input with Font Awesome icons
输出:
参考: https://bulma.io/documentation/form/input/#with-font-awesome-icons