Aligner mes ICON

Version imprimable

20/12/2020, 17h18
pilan

1 pièce(s) jointe(s)

Aligner mes ICON
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:

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, :roll:Pièce jointe 587015
20/12/2020, 17h29
NoSmoking

Bonjour et bienvenue sur DVP.

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

Oui désolée, merci

Code:

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>

Code:

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:

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;
}

Visiblement tu as obtenu ce que tu cherchais à faire :applo:

Je te mets ma contribution, un peu plus lourde

Code:

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

21/12/2020, 15h31
pilan

2 pièce(s) jointe(s)

Bordure ronde icon

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

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 .
22/12/2020, 14h48
NoSmoking

Citation:

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.

la solution la plus simple est d'éloigner le contenu de ton <li> en jouant avec sa propriété padding, (marge intérieure).

Citation:

car l'icon est un peu trop collé du texte .

Là tu peux jouer avec la propriété margin-right, (marge extérieure droite), de ton <i> pour éloigner le texte qui suit.
23/12/2020, 00h02
pilan

bordure icon

Bonsoir,

merci de la réponse je vais essayer. J'ai eu du mal au début avec les margin et padding. Surtout sur la compréhension mais je débute.8O

icon

Si les filtres qui sont les uns a coté des autres, dispose d'un triste ont doit utilise padding et margin pour que tout soit aligné ?
Car sur mon code, j'ai utilisé la propriété de flexbox mais mon titre reste en retrait.:( merci des retours.
Code:

1 2 3 4 5 6 7 8 9 <div class="filter">  <h3>Filtres</h3> <ul> <li>Économique</li> <li>Familiale</li> </ul> </div>
Code:

1 2 3 4 .filter ul li { list-style: none; display: inline; }

23/12/2020, 01h04
pilan

icon resultat

Encore merci d'avoir prit le temps de mettre des commentaires pour bien m'expliquer; c'est trés sympa.
je vais utiliser margin pour déplacer le cercle et sont icone.
23/12/2020, 10h48
NoSmoking
Citation:

... mais mon titre reste en retrait

les éléments <ul> ont un padding par défaut qu'il faut supprimer pour que l'alignement vertical avec le <h3> se fasse.
Code:

1 2 3 4 5 6 7 8 .filter ul { padding: 0; list-style: none; } .filter ul li { /* display: inline; /* */ display: inline-block; /* est a préférer pour autoriser le dimensionnement */ }
23/12/2020, 14h26
pilan

Mais je souhaite faire un alignement horizontal et non verticale.

Je veux que ma liste ul soit sur la meme ligne du h3.

J'ai essayé padding à 0 mais ca n'a pas marché je vais essayé de jouer sur margin et padding.

Merci du retour.
23/12/2020, 15h46
pilan

1 pièce(s) jointe(s)

margin et padding

Pièce jointe 587326
23/12/2020, 16h55
pilan

Reussi

J'ai réussi en changeant sa propriété de base en la remplacant par display inline .merciii pour les retours encore une fois.
Je serai mieux structurer ma page.
23/12/2020, 17h44
pilan

bloquer icon

Mais toujours bloqué sur la grosseur du cercle, et le placer à la gauche.

Je vais travailler un peu plus sur les margin et padding.