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

    .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

CodePudding user response：

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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

To show the fontawsome Icons you need to put in the source like this:

<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 :)