<div type="primary" icon="Download" text> <el-button> 导出订单 </el-button> </div> icon需要引入什么
时间: 2023-06-15 20:03:30 浏览: 57
在使用`<div>`标签中的`icon`属性时,需要使用特定的图标字体库。比较常用的字体库有Font Awesome和Element UI的图标字体库,你需要在页面中引入相应的字体库文件。例如,使用Element UI的图标字体库,你可以在HTML文件中添加以下代码来引入字体库:
```
<link rel="stylesheet" href="//unpkg.com/element-ui/lib/theme-chalk/icon.css">
```
这样就可以使用Element UI的图标字体库中的图标了。如果你想使用其他字体库中的图标,也需要先引入相应的字体库文件。
相关问题
<el-col :span="5"> <el-card style="color:#409EFF"> <div style="color:#409EFF"><i class="el-icon-s-shop"/>能力发布驳回数</div> <div style="padding:10px 0;text-align:center;font-weight:bold">100</div> </el-card> </el-col> <el-col :span="5"> <el-card style="color:#409EFF"> <div style="color:#409EFF"><i class="el-icon-s-shop"/>人工告警数量</div> <div style="padding:10px 0;text-align:center;font-weight:bold">100</div> </el-card> </el-col> <el-col :span="5"> <el-card style="color:#409EFF"> <div style="color:#409EFF"><i class="el-icon-s-shop"/>自动告警数量</div> <div style="padding:10px 0;text-align:center;font-weight:bold">100</div> </el-card> </el-col> <el-col :span="5"> <el-card style="color:#409EFF"> <div style="color:#409EFF"><i class="el-icon-s-shop"/>钉钉告警数量</div> <div style="padding:10px 0;text-align:center;font-weight:bold">100</div> </el-card> </el-col> <el-col :span="5"> <el-card style="color:#409EFF"> <div style="color:#409EFF"><i class="el-icon-s-shop"/>BOMC告警数量</div> <div style="padding:10px 0;text-align:center;font-weight:bold">100</div> </el-card> </el-col> </el-row>如何让这五个卡片大小统一展示在一条线上
你可以尝试在每个 `<el-col>` 元素中添加 `align="center"` 属性,同时在最外层的 `<el-row>` 元素中添加 `justify="center"` 属性,代码如下:
```
<el-row justify="center">
<el-col :span="5" align="center">
<el-card style="color:#409EFF">
<div style="color:#409EFF"><i class="el-icon-s-shop"/>能力发布驳回数</div>
<div style="padding:10px 0;text-align:center;font-weight:bold">100</div>
</el-card>
</el-col>
<el-col :span="5" align="center">
<el-card style="color:#409EFF">
<div style="color:#409EFF"><i class="el-icon-s-shop"/>人工告警数量</div>
<div style="padding:10px 0;text-align:center;font-weight:bold">100</div>
</el-card>
</el-col>
<el-col :span="5" align="center">
<el-card style="color:#409EFF">
<div style="color:#409EFF"><i class="el-icon-s-shop"/>自动告警数量</div>
<div style="padding:10px 0;text-align:center;font-weight:bold">100</div>
</el-card>
</el-col>
<el-col :span="5" align="center">
<el-card style="color:#409EFF">
<div style="color:#409EFF"><i class="el-icon-s-shop"/>钉钉告警数量</div>
<div style="padding:10px 0;text-align:center;font-weight:bold">100</div>
</el-card>
</el-col>
<el-col :span="5" align="center">
<el-card style="color:#409EFF">
<div style="color:#409EFF"><i class="el-icon-s-shop"/>BOMC告警数量</div>
<div style="padding:10px 0;text-align:center;font-weight:bold">100</div>
</el-card>
</el-col>
</el-row>
```
这样设置后,每个卡片的宽度会被限定在 `<el-col>` 元素的宽度内,同时 `<el-row>` 元素的 `justify` 属性可以让所有的元素在水平方向上居中对齐。
<div class="map-buttons"> <button class="map-button" @click="detectConflict"> <div class="map-button-content"> <span class="map-button-icon"></span> <span class="map-button-name">冲突检测</span> </div> </button> <button class="map-button" @click="captureScreenshot"> <div class="map-button-content"> <span class="map-button-icon"></span> <span class="map-button-name">截图</span> </div> </button> <button class="map-button" @click="generateMap"> <div class="map-button-content"> <span class="map-button-icon"></span> <span class="map-button-name">制图</span> </div> </button> <button class="map-button" @click="zoomIn"> <div class="map-button-content"> <span class="map-button-icon"></span> <span class="map-button-name">放大</span> </div> </button> <button class="map-button" @click="zoomOut"> <div class="map-button-content"> <span class="map-button-icon"></span> <span class="map-button-name">缩小</span> </div> </button> <button class="map-button" @click="showFullMap"> <div class="map-button-content"> <span class="map-button-icon"></span> <span class="map-button-name">全图</span> </div> </button> </div>改写成按钮名不在按钮元素中,而在按钮正下方
<div class="map-buttons">
<button class="map-button" @click="detectConflict">冲突检测</button>
<button class="map-button" @click="captureScreenshot">截图</button>
<button class="map-button" @click="generateMap">制图</button>
<button class="map-button" @click="zoomIn">放大</button>
<button class="map-button" @click="zoomOut">缩小</button>
<button class="map-button" @click="showFullMap">全图</button>
<div class="map-button-descriptions">
<span class="map-button-description">检测是否有冲突</span>
<span class="map-button-description">捕捉屏幕截图</span>
<span class="map-button-description">生成地图</span>
<span class="map-button-description">放大地图</span>
<span class="map-button-description">缩小地图</span>
<span class="map-button-description">查看全图</span>
</div>
</div>