为什么这个标签可以显示小图标<i class="nav-icon fas fa-ticket-alt"></i> 而这个只能显示一个矩形<i class="fa fa-user-circle-o fa-fw"></i>
时间: 2023-08-13 10:36:18 浏览: 62
这是因为不同的字体库包含的图标集合不同。第一个标签中使用的是 Font Awesome 字体库,它包含了大量常用图标,可以通过添加特定的 class 名称来显示不同的图标。而第二个标签中使用的是 FontAwesome 字体库,该字体库中可能没有包含<i class="fa fa-user-circle-o fa-fw"></i>这个图标,因此只能显示一个矩形。
相关问题
<div class="input-icon"> <i class="fas fa-user"></i>电话 如何设置图标距离文本“电话”3像素? </div>
你可以使用CSS中的padding或margin属性来实现图标和文本之间的间距。例如,使用下面的CSS代码可以将图标与文本之间的距离设置为3像素:
```
.input-icon {
display: flex;
align-items: center;
}
.input-icon i {
margin-right: 3px;
}
```
这里我们使用了flex布局来使图标和文本在同一行显示,并使用margin-right属性将图标向右移动3像素。你可以根据需要调整这个值。
<div class="content"> <div class="contentslide"> <ul class="slides"> <input type="radio" id="control-1" name="control" checked> <input type="radio" id="control-2" name="control"> <input type="radio" id="control-3" name="control"> <div class="navigator slide-1"> <label for="control-3"> <i class="fas fa-chevron-left"></i> </label> <label for="control-2"> <i class="fas fa-chevron-right"></i> </label> </div> <div class="navigator slide-2"> <label for="control-1"> <i class="fas fa-chevron-left"></i> </label> <label for="control-3"> <i class="fas fa-chevron-right"></i> </label> </div> <div class="navigator slide-3"> <label for="control-2"> <i class="fas fa-chevron-left"></i> </label> <label for="control-1"> <i class="fas fa-chevron-right"></i> </label> </div> <li class="slide"></li> <li class="slide"></li> <li class="slide"></li> <div class="controls-visible"> <label for="control-1"></label> <label for="control-2"></label> <label for="control-3"></label> </div> </ul> </div> <div class="video"> <video width="430px" height="320px" controls> <source src="video/sp.mp4" type="video/mp4"> </video> </div> </div>怎样让video和contentsi并排
可以使用CSS中的flex布局来实现video和contentslide的并排显示。具体的做法是在包含video和contentslide的父元素上设置display:flex属性,然后给它们分别设置flex属性来占据不同的宽度。例如可以给video设置flex:1,给contentslide设置flex:2,这样就可以让它们按照2:1的比例并排显示了。同时需要设置一下它们的宽度,可以使用百分比或者像素值。具体的CSS代码如下:
```
.content {
display: flex;
}
.video {
flex: 1;
width: 430px;
height: 320px;
}
.contentslide {
flex: 2;
/* 设置contentslide的宽度 */
width: 860px;
}
```