#5 Page Icons for Favicon, Apple/Android
Requirements
Resources
RazorBlade AddIcon to Html Headers
⚠️ WARNING: These examples only work in Dnn ☢️
Note that to ensure this tutorial can run on all platforms, we've included some #if NETCOREAPP
which changes what code runs on what platform.
Info about the Base Class
This tutorial inherits from the Custom.Hybrid.Razor14 base class.
This allows us to use Kit.Scrub
to access an IScrub
without having to use GetService<IScrub>
This page sets various icon headers according to best practices.
Look at the html-header in the output-source to see the effect.
The following links will set different icons depending on what you need.
The following links will set different icons depending on what you need.
⚠️ Code Disabled in Oqtane 💧
This code only works in DNN, so the tutorial has special conditional statements like#if NETCOREAPP
which disable the code in Oqtane.
See See how to use #if
#5 Page Icons for Favicon, Apple/Android
Source Code of this file
Below you'll see the source code of the file. Note that we're just showing the main part, and hiding some parts of the file which are not relevant for understanding the essentials. Click to expand the code
@inherits Custom.Hybrid.Razor14 @using ToSic.Razor.Blade; <!-- unimportant stuff, hidden --> <div @Sys.PageParts.InfoWrapper()> @Html.Partial("../shared/DefaultInfoSection.cshtml") <div @Sys.PageParts.InfoIntro()> <h2><em>RazorBlade</em> AddIcon to Html Headers</h2> @Html.Partial("MessageDnnOnlyUseIPageService.cshtml") @Html.Partial("../shared/KitBaseClassInfoBox.cshtml", new { ServiceName = "Scrub", Service = "IScrub" }) <div> This page sets various icon headers according to best practices. Look at the html-header in the output-source to see the effect. <br> The following links will set different icons depending on what you need. </div> <ul> @SubpageLink("Just add single icon", "one") @SubpageLink("Add default set incl. favicon and apple-touch", "set") @SubpageLink("Add default set without favicon", "nofav") @SubpageLink("Add default set with custom favicon (recommended)", "pngfav") </ul> </div> </div> @if (CmsContext.Platform.Name == "Oqtane") { @Html.Partial("../shared/MessageOqtaneDisabled.cshtml") } else { <text> @{ // use url parameter to decide which icon(s) to show, and default to "set" var mode = CmsContext.Page.Parameters["mode"] ?? "set"; // the icon we want to use for this page is this png file var iconUrl = App.Path + "/blade/assets/razor-blade-icon.png"; // now add the headers depending on the demo you picked // in your code you would only use one of these if (mode == "one") { Kit.Page.AddIcon(iconUrl); } else if (mode == "set") { Kit.Page.AddIconSet(iconUrl); } else if (mode == "nofav") { Kit.Page.AddIconSet(iconUrl, favicon: false); } else if (mode == "pngfav") { Kit.Page.AddIconSet(iconUrl, favicon: iconUrl); } } </text> } <!-- unimportant stuff, hidden --> @* Footer *@ @Html.Partial("../Shared/Layout/FooterWithSource.cshtml", new { Sys = Sys })