FontAwesome 带数字的图标或按钮
时间: 2024-02-03 10:14:54 浏览: 27
FontAwesome 提供了一些带数字的图标或按钮,可以使用以下代码实现:
1. 带数字的图标:
```html
<i class="fa fa-envelope-o">
<span class="badge badge-danger">3</span>
</i>
```
其中,`fa-envelope-o` 表示信封图标,`badge badge-danger` 表示红色背景的圆形标记,数字 `3` 则是标记上的数字。
2. 带数字的按钮:
```html
<button class="btn btn-primary">
Notification <span class="badge badge-light">5</span>
</button>
```
其中,`btn btn-primary` 表示蓝色的按钮样式,`badge badge-light` 表示浅色背景的圆形标记,数字 `5` 则是标记上的数字。
需要注意的是,使用 FontAwesome 带数字的图标或按钮时,需要同时引入 FontAwesome 和 Bootstrap 的 CSS 样式文件。
相关问题
ext FontAwesome 带数字的图标或按钮
可以使用 Font Awesome 提供的样式类和伪元素来创建带数字的图标或按钮。以下是一个例子:
```html
<!-- 一个带数字的图标 -->
<span class="fa-stack fa-2x">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-flag fa-stack-1x fa-inverse"></i>
<span class="fa-stack-1x fa-inverse">1</span>
</span>
<!-- 一个带数字的按钮 -->
<button class="btn btn-primary">
<i class="fas fa-envelope"></i>
<span class="badge badge-light">4</span>
</button>
```
在这个例子中,我们使用了 Font Awesome 的 `fa-stack` 类来创建一个图标叠加的效果,其中最底层的是一个圆圈图标,中间是一个旗帜图标,最上层是一个用来显示数字的 `span` 元素。使用 Font Awesome 的 `fa-inverse` 类可以使得图标变成白色,同时 `fa-stack-2x` 和 `fa-stack-1x` 类用来控制图标的大小。在第二个例子中,我们使用了 Font Awesome 的 `badge` 类来创建一个带数字的按钮,同时使用 Bootstrap 的 `btn` 和 `btn-primary` 类来设置按钮的样式。
Extjs 带数字的图标或按钮
ExtJS 提供了许多内置的图标和按钮,您可以通过配置图标的 cls 属性来设置自定义图标。以下是一个带数字的按钮示例:
```javascript
Ext.create('Ext.Button', {
text: 'My Button',
cls: 'my-button-icon', // 设置自定义图标样式
badgeText: '10', // 设置数字
renderTo: Ext.getBody()
});
```
然后在 CSS 文件中定义图标样式:
```css
.my-button-icon:before {
content: '\e602'; /* 设置 Unicode 编码 */
font-family: 'FontAwesome'; /* 设置字体 */
margin-right: 5px; /* 设置图标和文本之间的间距 */
}
```
此示例使用了 FontAwesome 图标库,您可以使用其他图标库或自己的图标。通过设置 badgeText 属性,您可以在按钮旁边添加一个数字。