Icon not centered

HTML & CSS
1

Good morning,

I can’t center the icons and I can’t see where I’m going wrong?

Do you have any idea?

https://codepen.io/aaashpnt-the-sans/pen/VwJaxjL

2

Change this

<div class="filtre margFiltre">

to this

<div class="filtre margFiltre flexCentre">
3

Thank you, it’s well centered, but the icon in my circle is still not centered

the 3 icons are not centered in the circle

<i class="fa-solid fa-house fa-lg

https://codepen.io/aaashpnt-the-sans/pen/VwJaxjL

4

Font-awesome is always a bit of a head scratcher. It looks like an image, but it has to be treated like text.

The TL;DR answer is you need to add a line-height equal to the circle height and a text-align: center to the i elements.

The longer answer is you have a lot of extraneous markup there. I’ve stripped it down to the minimum needed to get you what you need (sorry, the icon names are in English)

2 Likes
5

Great thank you, it works and the code is much cleaner like that.

If I want to hover on the button, what should I do?

I do it with the flex icon class?

6

Depends on what you want to do…

If you want JUST the icon, you can do something like

.icons:hover i {
  background-color: /* color 1 */
  color: /* color 2 */  
}

If you want the icons and the rest of the button, you’d also need something like

.icons:hover {
  background-color: /* color 1 */
  color: /* color 2 */  
}

I updated my example highlighting both of those (and also switched over to using custom properties)

1 Like
7

Thank you very much, this is really what I was looking for.

no longer do the filter I suppose it’s in js? I watched some tutorials online.

What do you think is the best and simplest way to make a filter?

8

w/o seeing the code, I’d guess it’s the selector in the js, and I ripped most of those out in my example.

1 Like
9

I didn’t quite understand, sorry, can you tell me the procedure I should follow to create a filter because I have never done this.

10

Good morning,

I asked my question in the more appropriate js forum I think.

Many thanks again for your help.