{"id":1041,"date":"2021-09-03T22:32:46","date_gmt":"2021-09-03T20:32:46","guid":{"rendered":"https:\/\/fileidea.com\/?p=1041"},"modified":"2021-09-03T22:34:29","modified_gmt":"2021-09-03T20:34:29","slug":"how-to-use-bootstrap-icons-with-npm-i-bootstrap-icons-in-angular","status":"publish","type":"post","link":"https:\/\/fileidea.com\/2021\/09\/03\/how-to-use-bootstrap-icons-with-npm-i-bootstrap-icons-in-angular\/","title":{"rendered":"How to use bootstrap icons with npm i bootstrap-icons in Angular"},"content":{"rendered":"\n<p>There are a few ways to go about it but I found this way to be the most working and simple. First of all, download the package and add it to your dependencies.<\/p>\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;HTML&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;html&quot;}\">\nnpm i bootstrap-icons --save\n\n<\/pre><\/div>\n\n\n<p>Then add this line to your <strong>styles.css<\/strong> file at the top:<\/p>\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;HTML&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;html&quot;}\">\n@import &quot;~bootstrap-icons\/font\/bootstrap-icons.css&quot;;\n\n<\/pre><\/div>\n\n\n<p>Now whenever you write a HTML with the <strong>i <\/strong>tag with the bi &lt;icon> code like below, you&#8217;ll see the icon appear!<\/p>\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;HTML&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;html&quot;}\">\n&lt;i class=&quot;bi bi-house&quot;&gt;&lt;\/i&gt;\n<\/pre><\/div>\n\n\n<p>For example, go to <a href=\"https:\/\/icons.getbootstrap.com\/icons\/house\/\">https:\/\/icons.getbootstrap.com\/icons\/house\/<\/a> we can see the code to the right that the code snippet is indeed &#8220;bi bi-house&#8221; for the house icon.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>There are a few ways to go about it but I found this way to be the most working and simple. First of all, download the package and add it to your dependencies. Then add this line to your styles.css file at the top: Now whenever you write a HTML with the i tag with &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/fileidea.com\/2021\/09\/03\/how-to-use-bootstrap-icons-with-npm-i-bootstrap-icons-in-angular\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;How to use bootstrap icons with npm i bootstrap-icons in Angular&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/posts\/1041"}],"collection":[{"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/comments?post=1041"}],"version-history":[{"count":0,"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/posts\/1041\/revisions"}],"wp:attachment":[{"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/media?parent=1041"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/categories?post=1041"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/tags?post=1041"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}