I'm looking to recreate this design using HTML and CSS:
https://i.sstatic.net/LUgGW.png
The icon I'm trying to replicate is actually from font awesome.
Here's what I've accomplished so far:
https://jsfiddle.net/0Lewug6p/1/
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p"
crossorigin="anonymous"
/>
<link
href="https://fonts.googleapis.com/css2?family=Raleway&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
</head>
<div class="search__filters__option">
<div class="filter__icon"><i class="fas fa-dog"></i></div>
Animaux autorisés
</div>* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Raleway", sans-serif;
}
.search__filters__option {
display: flex;
justify-content: flex-start;
align-items: center;
padding-right: 15px;
border-bottom: 2px solid #f2f2f2;
border-top: 2px solid #f2f2f2;
border-right: 2px solid #f2f2f2;
text-align: center;
border-radius: 20px;
font-weight: bold;
margin-right: 10px;
}
.search__filters__option:hover {
background-color: #deebff;
color: #0065fc;
cursor: pointer;
}
.filter__icon {
margin-right: 10px;
height: 35px;
width: 35px;
border-radius: 50%;
color: #0065fc;
background-color: #deebff;
display: flex;
justify-content: center;
align-items: center;
}I have a couple of issues with my code:
1- It doesn't quite match the image, for example, the colored circle isn't the right size.
2- I'm not sure if my code is clean since I'm still new to CSS and eager to learn best practices.
Thank you in advance for any help and explanations!