How can I shape my language icons into circles?

Shopify Discussion
1

Hi,

I would like to make the flags that I’m unsing as a language switcher round (so circle with a thin white border), but it’s not working. Tried this:

.img.sel-icon{
border-radius: 50%;
}

https://sugarfreeeu.com/en

Hope someone could help!

2

Hi @Eli90 ,

To transform the rectangle image to a circle image, you need to edit the image’s parent. Please follow these steps:

  • Step 1: Go to Online Store → Edit theme

  • Step 2: Find folder theme.css and add this code to the bottom of this file :

.sel-iconWrapper {
    height: 32px!important;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
}
.sel-iconWrapper .sel-icon {
    margin: 0 auto;
    height: 100% !important;
    max-width: unset !important;
    width: auto !important;
}
  • Step 3: The result is below

view (97).png
view (97).png210×108 16.2 KB

Let me know if it works for you!

3

Hi @BSS-Commerce thank you for giving me a hand. Unfortunately it doesn’t work, any idea why?? :disappointed_face:

4

Hi @Eli90

You can check line 7130 in the theme.css

![view - 2022-11-22T094420.492.png|489x214](upload://aViJugf4kpYfy9TDwocT7mhfzq6.png)

This is the reason why the CSS can’t work after line 7130. You should delete the " } " in this line, and your problem can be cleared.

Let me know if you find my answer useful by giving us a like or marking it as a solution.

5

Hi @BSS-Commerce thank you for trying, but for some reason this once also didn’t work

6

@Eli90 m, Please add the below line of code at the end of your theme.css file.

body .sel-icon{
height:30px;
width:30px;
overflow: hidden;
border-radius: 20px;
object-fit: cover;
}

Let me know if you are facing any issues after adding the above css.