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 #193] Using ionic, couldn't get it to work #132

New issue

Closed

opened 2026-03-03 14:34:47 +03:00 by kerem · 8 comments

kerem commented

2026-03-03 14:34:47 +03:00

Owner

Originally created by @egemenertugrul on GitHub (Jan 31, 2016).
Original GitHub issue: https://github.com/lipis/flag-icons/issues/193

I'm currently using Ionic Framework and after i did npm install and npm install flag-icon-css i couldnt get it to work. flags don't show up in my span. What do i have to do additionally?

Originally created by @egemenertugrul on GitHub (Jan 31, 2016). Original GitHub issue: https://github.com/lipis/flag-icons/issues/193 I'm currently using Ionic Framework and after i did `npm install` and `npm install flag-icon-css` i couldnt get it to work. flags don't show up in my span. What do i have to do additionally?

kerem closed this issue

2026-03-03 14:34:47 +03:00

kerem commented

2026-03-03 14:34:48 +03:00

Author

Owner

@lipis commented on GitHub (Jan 31, 2016):

set the correct path I guess..

@lipis commented on GitHub (Jan 31, 2016): set the correct path I guess..

kerem commented

2026-03-03 14:34:48 +03:00

Author

Owner

@stjepan commented on GitHub (Feb 9, 2016):

It worked for me. Start up your NodeJs command prompt and go to the root folder of your ionic application and do following:

npm install --save flag-icon-css
bower install --save flag-icon-css

Now back in your index.html (or what ever is your application startup file), include the css-file which is now in the lib/flag-icon-css/css folder.

<link href="lib/flag-icon-css/css/flag-icon.min.css" rel="stylesheet">

Now you're free to use it in you html files like this:

<i class="flag-icon flag-icon-gr"></i>

@stjepan commented on GitHub (Feb 9, 2016): It worked for me. Start up your NodeJs command prompt and go to the root folder of your ionic application and do following: 1. `npm install --save flag-icon-css` 2. `bower install --save flag-icon-css` Now back in your index.html (or what ever is your application startup file), include the css-file which is now in the lib/flag-icon-css/css folder. `<link href="lib/flag-icon-css/css/flag-icon.min.css" rel="stylesheet">` Now you're free to use it in you html files like this: `<i class="flag-icon flag-icon-gr"></i>`

kerem commented

2026-03-03 14:34:48 +03:00

Author

Owner

@lipis commented on GitHub (Feb 23, 2016):

I guess everything should be ok.. :)

@lipis commented on GitHub (Feb 23, 2016): I guess everything should be ok.. :)

kerem commented

2026-03-03 14:34:48 +03:00

Author

Owner

@JeetuChoudhary commented on GitHub (Aug 20, 2017):

I am facing the same issue. I did as described above, still it is not working

@JeetuChoudhary commented on GitHub (Aug 20, 2017): I am facing the same issue. I did as described above, still it is not working

kerem commented

2026-03-03 14:34:48 +03:00

Author

Owner

@RalPhounet commented on GitHub (May 28, 2018):

You can download the flag-icon-css-master.zip there http://flag-icon-css.lip.is/.

The you can just copy the"css/flag-icon.css" file into your Ionic project "src/assets/css" folder, and the"flags" folder into your "src/assets/flags".

Then add the <link href="assets/css/flag-icon.css" rel="stylesheet"> line in your index.html.

Now you're free to use it in you html files like this:

    <button ion-button (click)="changeLang('fr')">
      <i class="flag-icon flag-icon-fr"></i>
    </button>

@RalPhounet commented on GitHub (May 28, 2018): You can download the flag-icon-css-master.zip there http://flag-icon-css.lip.is/. The you can just copy the"css/flag-icon.css" file into your Ionic project "src/assets/css" folder, and the"flags" folder into your "src/assets/flags". Then add the `<link href="assets/css/flag-icon.css" rel="stylesheet">` line in your index.html. Now you're free to use it in you html files like this: ``` <button ion-button (click)="changeLang('fr')"> <i class="flag-icon flag-icon-fr"></i> </button> ```

kerem commented

2026-03-03 14:34:48 +03:00

Author

Owner

@oberghea commented on GitHub (Jul 31, 2019):

If you are into a React project you need to import in your root index the CSS file, like this: import 'flag-icon-css/css/flag-icon.min.css';

@oberghea commented on GitHub (Jul 31, 2019): If you are into a React project you need to import in your root index the `CSS` file, like this: `import 'flag-icon-css/css/flag-icon.min.css';`

kerem commented

2026-03-03 14:34:49 +03:00

Author

Owner

@jayordway commented on GitHub (Oct 10, 2019):

To import the css within an ionic project add it the styles to your angular.json file.

"styles": [
              {
                "input": "src/theme/variables.scss"
              },
              {
                "input": "src/global.scss"
              },
              {
                "input": "node_modules/flag-icon-css/css/flag-icon.css"
              }
            ],

@jayordway commented on GitHub (Oct 10, 2019): To import the css within an ionic project add it the styles to your angular.json file. ``` "styles": [ { "input": "src/theme/variables.scss" }, { "input": "src/global.scss" }, { "input": "node_modules/flag-icon-css/css/flag-icon.css" } ], ```

kerem commented

2026-03-03 14:34:49 +03:00

Author

Owner

@manaclan commented on GitHub (Nov 21, 2021):

If you are into a React project you need to import in your root index the CSS file, like this: import 'flag-icon-css/css/flag-icon.min.css';

as of 21/11/2021, the path should be flag-icon-css/css/flag-icons.min.css

@manaclan commented on GitHub (Nov 21, 2021): > If you are into a React project you need to import in your root index the `CSS` file, like this: `import 'flag-icon-css/css/flag-icon.min.css';` as of 21/11/2021, the path should be `flag-icon-css/css/flag-icons.min.css`

kerem referenced this issue

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

[PR #300] [MERGED] Flag of Qatar (Fixes #132) #742