@Ehren ,

Is there any way to display the flags in a larger size? That's what I have:

I'm using in the grid:

{{$flag = mb_strtolower( $country );}}
<div><i class="ipsFlag ipsFlag-{$flag}"></i></div>

I tried all of this: https://docs.fontawesome.com/web/style/size. Also tried to increase the font size: i-font-size_X.

I see it is hardcoded:

.ipsFlag {
	--y: 0;
	width: 16px;
	height: 16px;
	background-image: url('{resource="flags.png" app="core" location="global" inCss="true"}');
	background-size: 16px auto;
	background-position: 0 calc(var(--y) * -1px);
	display: inline-block;
	vertical-align:text-top;
	line-height:16px;
}

If I increase it to test, it shows more than one flag per grid cell.

EDIT: I'm able to do it using an external API:

But as you can see there are like 10 countries that show no flags.

Any suggestions?

Thank you.

Edited February 22Feb 22 by Adriano Faria

Yeah, the flag icons aren't FontAwesome, so none of that code will work.

Adding this to your CSS area will allow you to adjust the size of the flag by modifying the --_size variable. With that said, the flag image will start getting blurry after 32px, so it's not super flexible. We don't display flags larger than this by default, so we haven't needed anything larger.

.ipsFlag{
    --_size: 50px;
    
    font-size: var(--_size);
    line-height: var(--_size);
    width: var(--_size);
    height: var(--_size);
    background-size: var(--_size) auto;
    background-position: 0 calc(var(--y) / -16 * var(--_size));
}