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 #511] How to include in project? #308

New issue

Closed

opened 2026-03-03 14:37:24 +03:00 by kerem · 8 comments

kerem commented

2026-03-03 14:37:24 +03:00

Owner

Originally created by @julianeden on GitHub (Dec 1, 2018).
Original GitHub issue: https://github.com/lipis/flag-icons/issues/511

I'm sorry for what I'm sure must be a stupid question, but I'm not sure how to use this despite carefully reading the README.

I successfully ran npm install --save flag-icon-css as instructed, and then applied the correct classes to an element, but nothing happens. How can I include the CSS into the page? Am I supposed to dig into my node-modules folder and find the name of the css file and manually include it, and if so shouldn't that step be part of the usage section of the README?

e.g.
<link href="node_modules/flag-icon-css/css/flag-icon.min.css" rel="stylesheet">

If it gives any insight to my confusion, I have never included CSS through npm before and am a little unsure how to go about it. Am I basically just using npm to download the files in this case, with the assumption that I'll then be moving them to my static assets folder manually? normally installed modules stay in the node_modules folder of course.

Originally created by @julianeden on GitHub (Dec 1, 2018). Original GitHub issue: https://github.com/lipis/flag-icons/issues/511 I'm sorry for what I'm sure must be a stupid question, but I'm not sure how to use this despite carefully reading the README. I successfully ran `npm install --save flag-icon-css` as instructed, and then applied the correct classes to an element, but nothing happens. How can I include the CSS into the page? Am I supposed to dig into my node-modules folder and find the name of the css file and manually include it, and if so shouldn't that step be part of the usage section of the README? e.g. `<link href="node_modules/flag-icon-css/css/flag-icon.min.css" rel="stylesheet">` If it gives any insight to my confusion, I have never included CSS through npm before and am a little unsure how to go about it. Am I basically just using npm to download the files in this case, with the assumption that I'll then be moving them to my static assets folder manually? normally installed modules stay in the node_modules folder of course.

kerem closed this issue

2026-03-03 14:37:25 +03:00

kerem commented

2026-03-03 14:37:25 +03:00

Author

Owner

@julianeden commented on GitHub (Dec 1, 2018):

I figured it out, but for the record I still think this should be addressed in the usage section rather than treat it as a given. It would only take one additional sentence.

@julianeden commented on GitHub (Dec 1, 2018): I figured it out, but for the record I still think this should be addressed in the usage section rather than treat it as a given. It would only take one additional sentence.

kerem commented

2026-03-03 14:37:25 +03:00

Author

Owner

@lipis commented on GitHub (Dec 1, 2018):

I'm open to PRs with suggestions @aerovistae!

@lipis commented on GitHub (Dec 1, 2018): I'm open to PRs with suggestions @aerovistae!

kerem commented

2026-03-03 14:37:26 +03:00

Author

Owner

@Dremet commented on GitHub (Feb 22, 2019):

Would have been nice, if you would have at least shared your insights @julianeden. I am having the same question and have not yet figured it out. Or could you explain how to use it @lipis? Still does not seem to be included in the readme file.

@Dremet commented on GitHub (Feb 22, 2019): Would have been nice, if you would have at least shared your insights @julianeden. I am having the same question and have not yet figured it out. Or could you explain how to use it @lipis? Still does not seem to be included in the readme file.

kerem commented

2026-03-03 14:37:26 +03:00

Author

Owner

@Dremet commented on GitHub (Feb 22, 2019):

I want to specify my problem. It is true that I am quite new to node, but nevertheless people like me also should know how to use it. So generally I have all my scss/css files in the "public/" folder, which is how it is supposed to be, but after installing flag-icon-css nothing appears there. That is what probably also confused @julianeden. We both looked into "node_modules/flag-icon-css/", but those files should probably not be used for the website content I guess because just all files in "public/" are supposed to be visible by the user (via source code look-up). So what is the correct way of including the css/scss in a node application after installing the package?

@Dremet commented on GitHub (Feb 22, 2019): I want to specify my problem. It is true that I am quite new to node, but nevertheless people like me also should know how to use it. So generally I have all my scss/css files in the "public/" folder, which is how it is supposed to be, but after installing flag-icon-css nothing appears there. That is what probably also confused @julianeden. We both looked into "node_modules/flag-icon-css/", but those files should probably not be used for the website content I guess because just all files in "public/" are supposed to be visible by the user (via source code look-up). So what is the correct way of including the css/scss in a node application after installing the package?

kerem commented

2026-03-03 14:37:26 +03:00

Author

Owner

@lipis commented on GitHub (Feb 22, 2019):

it really depends on how your project is setup.. webpack gulp manual etc.. it could be anything. you just have to get the CSS and the icons included in your app :)

@lipis commented on GitHub (Feb 22, 2019): it really depends on how your project is setup.. webpack gulp manual etc.. it could be anything. you just have to get the CSS and the icons included in your app :)

kerem commented

2026-03-03 14:37:26 +03:00

Author

Owner

@Dremet commented on GitHub (Feb 22, 2019):

I just figured out a way, but I do still not know whether this is good practice. I think this will help a lot of other persons who are also in the same phase as me (developing the first projects with node):
After installing the package with npm, I included this in my app.js:
app.use('/flags', express.static(path.join(__dirname, 'node_modules/flag-icon-css/'), { maxAge: 31557600000 }));
and in my (pug) template file I included:
link(rel='stylesheet', href='/flags/css/flag-icon.min.css')

and now I am able to use the css classes. Does this sound like good practice to you @lipis? (I do not use webpack, gulp,...)

@Dremet commented on GitHub (Feb 22, 2019): I just figured out a way, but I do still not know whether this is good practice. I think this will help a lot of other persons who are also in the same phase as me (developing the first projects with node): After installing the package with npm, I included this in my app.js: `app.use('/flags', express.static(path.join(__dirname, 'node_modules/flag-icon-css/'), { maxAge: 31557600000 })); ` and in my (pug) template file I included: `link(rel='stylesheet', href='/flags/css/flag-icon.min.css')` and now I am able to use the css classes. Does this sound like good practice to you @lipis? (I do not use webpack, gulp,...)

kerem commented

2026-03-03 14:37:26 +03:00

Author

Owner

@lipis commented on GitHub (Feb 22, 2019):

Do you see the flags when you deploy the app? Then it's good..

@lipis commented on GitHub (Feb 22, 2019): Do you see the flags when you deploy the app? Then it's good..

kerem commented

2026-03-03 14:37:26 +03:00

Author

Owner

@Dremet commented on GitHub (Feb 23, 2019):

I do, I just worried cause by applying that "app.use(...)" line might make something publicly available that should not be available.

@Dremet commented on GitHub (Feb 23, 2019): I do, I just worried cause by applying that "app.use(...)" line might make something publicly available that should not be available.

kerem referenced this issue

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

[PR #308] [MERGED] Flag of Montenegro #746