starred/flag-icons

Fork 0

mirror of https://github.com/lipis/flag-icons.git synced 2026-04-26 09:25:50 +03:00

[GH-ISSUE #15] Flag wrapper #7

New issue

Closed

opened 2026-03-03 14:33:52 +03:00 by kerem · 4 comments

kerem commented

2026-03-03 14:33:52 +03:00

Owner

Originally created by @xavadu on GitHub (May 7, 2014).
Original GitHub issue: https://github.com/lipis/flag-icons/issues/15

Hello,

There is an issue with the flag wrapper, the .flag-icon class, if you want to add a border it is bigger than the flag itself, add a border is useful when you work with white background, they are many flag that have white parts or per example, Japan flag.

At the moment i solved it overridden .flag-icon with it:

// border on the flags
.flag-icon {
    border: 1px solid @gray-light;
    background-color: @gray-light;
    line-height: 0.9em;
    text-align: center;
}

it works on all the browsers but it is not a final solution, because like the unit it em, on medium screen the with doesn't match totally.

Originally created by @xavadu on GitHub (May 7, 2014). Original GitHub issue: https://github.com/lipis/flag-icons/issues/15 Hello, There is an issue with the flag wrapper, the .flag-icon class, if you want to add a border it is bigger than the flag itself, add a border is useful when you work with white background, they are many flag that have white parts or per example, Japan flag. At the moment i solved it overridden .flag-icon with it: ``` // border on the flags .flag-icon { border: 1px solid @gray-light; background-color: @gray-light; line-height: 0.9em; text-align: center; } ``` it works on all the browsers but it is not a final solution, because like the unit it em, on medium screen the with doesn't match totally.

kerem closed this issue

2026-03-03 14:33:53 +03:00

kerem commented

2026-03-03 14:33:53 +03:00

Author

Owner

@lipis commented on GitHub (May 7, 2014):

It's a known thingy and you can solve that with different ways..

You can change also the background-size: contain; to background-size: cover; and it will try to fit the flag inside the box so instead of having double border sometimes it will just crop the flag..

Or instead of the border you could use the box-shadow property

box-shadow: 0 0 1px @gray-light, 0 0 1px @gray-light, 0 0 1px @gray-light;

But I'm leaving all that to the end user as it really depends on the project..

@lipis commented on GitHub (May 7, 2014): It's a known thingy and you can solve that with different ways.. You can change also the `background-size: contain;` to `background-size: cover;` and it will try to fit the flag inside the box so instead of having double border sometimes it will just crop the flag.. Or instead of the `border` you could use the `box-shadow` property ``` css box-shadow: 0 0 1px @gray-light, 0 0 1px @gray-light, 0 0 1px @gray-light; ``` But I'm leaving all that to the end user as it really depends on the project..

kerem commented

2026-03-03 14:33:53 +03:00

Author

Owner

@xavadu commented on GitHub (May 7, 2014):

Thanks for the quickly reply @lipis

@xavadu commented on GitHub (May 7, 2014): Thanks for the quickly reply @lipis

kerem commented

2026-03-03 14:33:54 +03:00

Author

Owner

@yohan-th commented on GitHub (Jun 28, 2020):

Previous solutions didn't work on my project.

I fix it with :

.flag-icon{
    box-sizing: border-box!important;
    border:1px solid #000;
    background-size: cover!important;
}

@yohan-th commented on GitHub (Jun 28, 2020): Previous solutions didn't work on my project. I fix it with : ``` .flag-icon{ box-sizing: border-box!important; border:1px solid #000; background-size: cover!important; } ```

kerem commented

2026-03-03 14:33:54 +03:00

Author

Owner

@Elfayer commented on GitHub (Sep 4, 2024):

I'm putting this here if it helps, this is my React component for flags:

import { ComponentProps } from 'react';
import { twMerge } from 'tailwind-merge';

interface FlagProps extends ComponentProps<'i'> {
  code: string;
}

export function Flag({ code, className, ...props }: FlagProps) {
  return (
    <div className="inline-flex h-4 border border-black">
      <i className={twMerge(`fi fi-${code.toLowerCase()} !bg-cover`, className)} {...props} />
    </div>
  );
}

Basically I go for the approach of background-size: cover;.

I enforce the size to 16px (h-4 in tailwind). If I need more sizes, I'd add a prop size: 'sm' | 'md' | 'lg' maybe, or place the props spread on the div instead of the i tag, will see how it scales.

@Elfayer commented on GitHub (Sep 4, 2024): I'm putting this here if it helps, this is my React component for flags: ```tsx import { ComponentProps } from 'react'; import { twMerge } from 'tailwind-merge'; interface FlagProps extends ComponentProps<'i'> { code: string; } export function Flag({ code, className, ...props }: FlagProps) { return ( <div className="inline-flex h-4 border border-black"> <i className={twMerge(`fi fi-${code.toLowerCase()} !bg-cover`, className)} {...props} /> </div> ); } ``` Basically I go for the approach of `background-size: cover;`. I enforce the size to 16px (`h-4` in tailwind). If I need more sizes, I'd add a prop `size: 'sm' | 'md' | 'lg'` maybe, or place the `props` spread on the `div` instead of the `i` tag, will see how it scales.

kerem referenced this issue

2026-03-03 14:40:03 +03:00

[PR #7] [MERGED] Fixed typo in README.md #634