[英]How to align font awesome and text using flex box
I'm doing some homework and I'm trying to reproduce this right here我正在做一些功课,我正试图在这里重现这个
this is my code这是我的代码
<div class="filterbar">
<p>Filtres</p>
<button class="buttonfilter Eco"> <i class="fas fa-money-bill-wave fa-2x"></i> Economique</button>
<button class="buttonfilter Fam"> <i class="fas fa-child fa-2x"></i>Famillial</button>
<button class="buttonfilter Rom"> <i class="fas fa-heart fa-2x"></i>Romantique</button>
<button class="buttonfilter Pet"> <i class="fas fa-dog fa-2x"></i>Animaux autorisé</button>
</div>
CSS right here CSS 就在这里
.filterbar{
display: flex;
max-width: 1100px;
margin: 0 auto;
overflow: auto;
}
.filterbar p {
font-weight: bold;
font-size: 18px;
margin-top: 10px;
margin-right: 20px;
}
.buttonfilter{
display: flex;
align-items: stretch;
height: 50px;
background: none;
border: 4px solid var(--background);
border-radius: 30px;
padding: 0;
}
.fa-money-bill-wave,.fa-child,.fa-heart,.fa-dog {
color: var(--primary-color);
background: rgba(0,101,252,0.2);
border-radius: 100px;
}
and the thing is that I can't align the font awesome icon and the text, and the background of the font awesome is so strange I really don't understand问题是我无法对齐字体真棒图标和文本,字体真棒的背景太奇怪了我真的不明白
To show the fontawsome Icons you need to put in the source like this:要显示 fontawsome 图标,您需要像这样放入源代码:
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous
This worked for me:这对我有用:
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
<i class="fas fa-money-bill-wave fa-2x"></i><button>Economique</button>
<i class="fas fa-child fa-2x"></i>
<button>Famillial</button>
<i class="fas fa-heart fa-2x"></i>
<button>Romantique</button>
<i class="fas fa-dog fa-2x"></i>
<button>Animaux autorise</button>
I think at this point you can adjust it yourself:)我认为此时您可以自己调整它:)
I have litte modified your code:我修改了你的代码:
.filterbar{ display: flex; max-width: 1100px; width: 1100px; margin: 0 auto; overflow: auto; justify-content: space-between; }.filterbar p { font-weight: bold; font-size: 18px; margin-top: 10px; margin-right: 20px; }.buttonfilter{ display: flex; align-items: stretch; height: 50px; background: none; border: 4px solid var(--background); border-radius: 30px; padding: 0; align-items: center; border: 1px solid #333; padding-right: 10px; }.fa-money-bill-wave,.fa-child,.fa-heart,.fa-dog { color: var(--primary-color); background: rgba(0,101,252,0.2); border-radius: 100px; padding: 10px; margin-right: 10px; width: 35px; }
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <div class="filterbar"> <p>Filtres</p> <button class="buttonfilter Eco"> <i class="fas fa-money-bill-wave fa-2x"></i> Economique</button> <button class="buttonfilter Fam"> <i class="fas fa-child fa-2x"></i>Famillial</button> <button class="buttonfilter Rom"> <i class="fas fa-heart fa-2x"></i>Romantique</button> <button class="buttonfilter Pet"> <i class="fas fa-dog fa-2x"></i>Animaux autorisé</button> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.