{"id":155,"date":"2022-02-02T16:38:40","date_gmt":"2022-02-02T16:38:40","guid":{"rendered":"http:\/\/gkokot.com\/?p=155"},"modified":"2022-02-05T11:26:57","modified_gmt":"2022-02-05T11:26:57","slug":"bootstrap-icons-and-azure-app-services","status":"publish","type":"post","link":"https:\/\/gkokot.com\/?p=155","title":{"rendered":"Bootstrap icons and Azure App Services"},"content":{"rendered":"\n

With latest version of Bootstrap (popular front-end open source toolkit) we can use also bootstrap-icons, official open source SVG icon library for Bootstrap.<\/p>\n\n\n\n

I updated my website built with Asp.net and bootstrap to the latest versions of all components<\/p>\n\n\n\n

( .Net >4.8, Bootstrap > 5.1 ) and implemented Bootstrap-icons v1.7.<\/p>\n\n\n\n

All worked well on development environment (local computer with Visual Studio 2022), website was displayed correctly in browser and all icons (using as font) also.<\/p>\n\n\n\n

But once published in Azure as App Service, icons were not displayed (replaced by empty rectangle)<\/p>\n\n\n\n

Two issues have been detected during my investigations:<\/p>\n\n\n\n

  1. Using files with extensions on Azure App Services (IIS):  .woof and .woff2 (used by bootstrap-icons)<\/li>
  2. Using stylesheet files from bootstrap v5.1 in Asp.net MVC project on Azure App Services (IIS).<\/li><\/ol>\n\n\n\n

    Solution in Azure:<\/h2>\n\n\n\n
    1. Install extension in App Service: \u201cEnable Static Web Fonts\u201d
      <\/li><\/ol>\n\n\n\n
      \"\"<\/figure>\n\n\n\n

      2. In website project, replaces related .css files from BundledConfig.cs to header of file _Layout.cshtml.<\/p>\n\n\n\n

      \"\"
      From BundledConfig.cs <\/figcaption><\/figure>\n\n\n\n
      \"\"
      To _Layout.cshtml<\/figcaption><\/figure>\n\n\n\n

      Now Azure App Service working well and display correctly all components.<\/p>\n\n\n\n

      https:\/\/www.forest59.com<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

      With latest version of Bootstrap (popular front-end open source toolkit) we can use also bootstrap-icons,Read More…<\/a><\/p>\n","protected":false},"author":1,"featured_media":161,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8,11,3,5],"tags":[13,16,12,15,14],"class_list":["post-155","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-asp-net","category-azure","category-c","category-visual-studio","tag-aps-net","tag-azure","tag-bootstrap","tag-bootstrap-icons","tag-c"],"_links":{"self":[{"href":"https:\/\/gkokot.com\/index.php?rest_route=\/wp\/v2\/posts\/155"}],"collection":[{"href":"https:\/\/gkokot.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gkokot.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gkokot.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gkokot.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=155"}],"version-history":[{"count":3,"href":"https:\/\/gkokot.com\/index.php?rest_route=\/wp\/v2\/posts\/155\/revisions"}],"predecessor-version":[{"id":221,"href":"https:\/\/gkokot.com\/index.php?rest_route=\/wp\/v2\/posts\/155\/revisions\/221"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gkokot.com\/index.php?rest_route=\/wp\/v2\/media\/161"}],"wp:attachment":[{"href":"https:\/\/gkokot.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=155"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gkokot.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=155"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gkokot.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=155"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}