Discussion :

[pilan]

Bonjour,



Je rencontre un souci au niveau de mon code css , pour ma page web je dois inclure des filtres par thème contenant des icon font awasome.
J'ai utilisé la propriété border-raduis mais je souhaite faire une bordure rond ( coté gauche seulement) à mes icon ne sortant pas de mes filtres ( contenant eux même border-raduis)
Mon site n'est pas encore en ligne .
je pense que le code n'est pas correct au niveaux du padding;

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
.fa-money-bill-wave,
.fa-child,
.fa-heart,
.fa-dog {
  color: #0065fc;
  border-radius: 50%;
  background-color: #deebff;
 
  padding: 5px 5px 5px 5px;
}

Je suis débutante,

[NoSmoking]

Bonjour et bienvenue sur DVP.

Il serait bon que tu nous mettes le code HTML correspondant.

[pilan]

Oui désolée, merci

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<div class="elementfilter">
        <ul>
          <h4>Filtres</h4>
          <li><i class="fas fa-child"></i>Familiale</li>
          <li><i class="fas fa-heart"></i>Romantique</li>
        </ul>
      </div>

[pilan]

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<div class="elementfilter">
          <h3>Filtres</h3>
        <ul class="filterbloc">
          <li><i class="fas fa-child"></i>Familiale</li>
          <li><i class="fas fa-heart"></i>Romantique</li>
        </ul>
      </div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.elementfilter ul li {
  display: inline;
  border: 2.5px solid #f2f2f2;
  border-radius: 10rem;
  padding-top: 0.5rem;
  padding-right: 1rem;
  padding-bottom: 0.5rem;
  padding-left: 0.5rem;
}
 
.fa-money-bill-wave,
.fa-child,
.fa-heart,
.fa-dog {
  color: #0065fc;
  border-radius: 50%;
  background-color: #deebff;
  padding: 5px 5px 5px 5px;
}

[NoSmoking]

Visiblement tu as obtenu ce que tu cherchais à faire

Je te mets ma contribution, un peu plus lourde

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
li {
  display: inline-block;        /* mode de rendu qui change tout */
  padding: .25em;               /* un peu d'espace intérieur */
  padding-right: 1em;           /* un peu plus d'espace à droite */
  border: 2px solid #069;       /* pour voir le cercle */
  border-radius: 1.25em;        /* pour un rendu rond */
}
li i {
  width: 1em;                   /* pour un rendu carré */
  height: 1em;                  /* pour un rendu carré */
  margin-right: .5em;           /* éloigne le texte de droite */
  padding: .25em;               /* pour donner de l'air autour du symbôle */
  border: 1px solid #069;       /* pour voir le cercle */
  border-radius: 50%;           /* pour un rendu rond */
  text-align: center;           /* centrafe horizontal du texte */
  font-size: 1.25em;            /* pour grossir un peu le symbôle */
  color: #06F;                  /* couleur du texte */
  background-color: #DEF;       /* couleur du fond */
}

PS : merci de penser à mettre la discussion en résolue

[pilan]

Merci @noSmoking pour le retour , qui me guide vraiment dans ma compréhension et l'utilisation des propriétés css.

Je rencontre toujours un problème au niveaux de border-raduis des icons qui ne prends pas assez l'espace du coté gauche dans sa bordure de filtre.

Je vais modifié sa taille et voir ce que ca donne et modifié les padding car l'icon est un peu trop collé du texte .