The flag icon does not display.

Silverstripe Version: 3.1
Question: The flag icon does not display.

My problem is that the newly added flag is not displayed at all.
I added a picture and added the code analogously to the other flags that normally display. In addition, the font is bigger.


What is this all about? I did the same as with other flags. Nevertheless, it does not display as it should. Maybe too many flag positions? (there are 20).

Nobody knows? :confused:

It would probably be worth adding a little more information so there’s something more to go on, it can be hard to diagnose from just a screenshot. It would be worth posting some code so we know where/how this is happening. Also, are there any errors being generated in the browser or server logs? Are there any differences in the styles / classes for that flag?

The fact that the font size is larger on that element suggests you have a problem with the markup on that element. Perhaps you are missing a css class name or are using the wrong one, or maybe the html structure is slightly different so the style rules aren’t matching.

Edit: @Tim already made this point :grinning_face_with_smiling_eyes:

1 Like

There is no difference. I just changed in and style.scss. Below links to screenshots. I did it in these places and analogously to other elements.

Files:, style.scss

Your Denmark css selector is very different to the others. If the html markup is consistent, try changing it to match the others:, .dk-DK a { ... }.

On a related topic, it looks like there’s a lot of repetition in your css which makes the code harder to maintain and easy for inconsistencies to spring up. It looks like only the background image changes between those nodes, so you could have one rule that targets e.g. .dropdown-menu > li and adds most of the styles, then additional separate rules for each flag to set the flag image.

I’m slightly confused here. In the CSS the Danish link has a font size of 14px, the others are 12px. You’re also using a .png for the Danish flag, and .jpg for the others… is that correct?

If you inspect the element in your dev tools, it should show you the CSS rules which are causing it to be larger than the others.

oops, I have sent a wrong screenshot. Of course, there is a font-size: 12px.
PNG should be ok. Some flags also have and are visible.

Span is all the time. I put a bad screen shot.

I’ll try to do that. I just do not want the website to break.