Aug 31, 2021, 9:25 PM
[guide] How to enable old FamFamFam icons in new Ext.NET 7 Classic
Introduction
This guide will help you enable the old FamFamFam icon set in new Ext.NET 7 set ups.
The FamFamFam Icon Set
The slick famfamfam icon set has been used in Ext.NET since its early versions and meshed up really well with the initial themes provided by it. If one's to use the Gray, Classic (often called "Blue"), Neptune and perhaps even Crisp and Triton, these icons have historically filled and enriched Ext.NET pages with user friendly images to illustrate buttons, panels, and other components' functionality.
Ext.NET 5 and previous versions have a comprehensive list of the icons supported. This is the example in Ext.NET 5: Miscellaneous > Icon > Icon Summary
Installing the icon set
To install this icon set in your already working Ext.NET 7 project, you need to download the slick icon set from the Fam Fam Fam website. At the time of the writing of this guide, latest version was 1.3, dated back roughly 15 years ago!
The download link for the slick icon set is available at this address.
After downloading the package, simply decompress the zip file and place the files under its icons/ folder in the location of preference within your project.
For this guide, we're going to use the
This should be all needed to install the icons in the project.
Set up icons
To make it easier to assign icons to components in your Ext.NET pages, we'd better draw CSS blocks for the desired icons. Basically the structure for each icon class should look like this:
- using [var]Microsoft.AspNetCore.Hosting
- defining the public/readonly model variable as
- injecting the
The constructor code just implementing this, from a default RazorPage model, should look like this:
And, all this just necessary if you want to dynamically build the full 1,000 list of possible icons.
Using the icons
And, finally, to actually use the icons, simply use
The Gray Theme
If you simply use the example above, you may notice an exception about the Gray theme not being available. In order to enable the theme, it is necessary to perform two steps:
1. Install the Ext.Net.Classic.Theme.Gray NuGet package from NuGet package manager
2. Register the theme resources in Startup.cs'
To also set the theme application-wide (thus remove the need of the
Conclusion
So, with a few steps, you can set up your Ext.NET 7 project to look exactly like old Ext.NET 5 and previous versions, on "classic" themes like Gray, Blue, Crisp or Neptune.
This guide will help you enable the old FamFamFam icon set in new Ext.NET 7 set ups.
The FamFamFam Icon Set
The slick famfamfam icon set has been used in Ext.NET since its early versions and meshed up really well with the initial themes provided by it. If one's to use the Gray, Classic (often called "Blue"), Neptune and perhaps even Crisp and Triton, these icons have historically filled and enriched Ext.NET pages with user friendly images to illustrate buttons, panels, and other components' functionality.
Ext.NET 5 and previous versions have a comprehensive list of the icons supported. This is the example in Ext.NET 5: Miscellaneous > Icon > Icon Summary
Installing the icon set
To install this icon set in your already working Ext.NET 7 project, you need to download the slick icon set from the Fam Fam Fam website. At the time of the writing of this guide, latest version was 1.3, dated back roughly 15 years ago!
The download link for the slick icon set is available at this address.
After downloading the package, simply decompress the zip file and place the files under its icons/ folder in the location of preference within your project.
For this guide, we're going to use the
wwwroot/resources/famfamfam_icons/
folder to place our icons in.This should be all needed to install the icons in the project.
Set up icons
To make it easier to assign icons to components in your Ext.NET pages, we'd better draw CSS blocks for the desired icons. Basically the structure for each icon class should look like this:
.icon-<icon_name_here> {
background-repeat: no-repeat;
background-image: url(/resources/famfamfam_icons/<icon_name_here>.png) !important;
}
But there are exactly 1,000 icons in the pack (isn't that a lot? impressive!), and maybe creating a block for each one of these is a bit overkill if you are going to use just a couple. So, for example, if all you need is the old Ext.NET's icon="Add"
and icon="PageExcel"
to your page, this CSS should suffice:.icon-add {
background-repeat: no-repeat;
background-image: url(/resources/famfamfam_icons/add.png) !important;
}
.icon-page-excel {
background-repeat: no-repeat;
background-image: url(/resources/famfamfam_icons/page_excel.png) !important;
}
But, if you want it for every single icon, this code block may be imbued on your page to dynamically generate the css (and you may want to just save it as a .css file for faster reference on the long run):<style type="text/css">
@{
var fullPath = System.IO.Path.Combine(Model.HostingEnvironment.WebRootPath, "resources", "famfamfam_icons");
var dir = new System.IO.DirectoryInfo(fullPath);
foreach (var file in dir.EnumerateFiles("*.png"))
{
@:.icon-@file.Name.Substring(0, file.Name.Length - file.Extension.Length) {
@: background-repeat: no-repeat;
@: background-image: url(/resources/famfamfam_icons/@(file.Name)) !important;
@:}
}
}
</style>
Notice we use a nonstandard Model.HostingEnvironment
reference here. This is made available, in the model page, by:- using [var]Microsoft.AspNetCore.Hosting
- defining the public/readonly model variable as
public readonly IWebHostEnvironment HostingEnvironment;
- injecting the
IWebHostEnvironment
parameter to the page model via its constructor.The constructor code just implementing this, from a default RazorPage model, should look like this:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
namespace MyProject
{
public class MyPageModel : PageModel
{
public readonly IWebHostEnvironment HostingEnvironment;
public MyPageModel(IWebHostEnvironment env)
{
HostingEnvironment = env;
}
public void OnGet()
{
}
}
}
All the other using
directives are added by the RazorPage template itself.And, all this just necessary if you want to dynamically build the full 1,000 list of possible icons.
Using the icons
And, finally, to actually use the icons, simply use
iconCls="icon-<name>"
.<ext-button text="My button" iconCls="icon-page_excel" />
With the model code above, the MyPage.cshtml's code should be something like this:@page
@model MyProject.MyPageModel
@{
Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>FamFamFam Icons on Ext.NET 7 and Gray Theme</title>
<ext-resourceManager theme="gray" />
<style type="text/css">
@{
var fullPath = System.IO.Path.Combine(Model.HostingEnvironment.WebRootPath, "resources", "famfamfam_icons");
var dir = new System.IO.DirectoryInfo(fullPath);
foreach (var file in dir.EnumerateFiles("*.png"))
{
@:.icon-@file.Name.Substring(0, file.Name.Length - file.Extension.Length) {
@: background-repeat: no-repeat;
@: background-image: url(/resources/famfamfam_icons/@(file.Name)) !important;
@:}
}
}
</style>
</head>
<body style="padding:10px">
<ext-button text="My button" iconCls="icon-page_excel" />
<ext-panel title="My panel" iconCls="icon-pencil_go" html="Panel contents go here" width="200" height="100" />
</body>
</html>
The page's output should look like this:The Gray Theme
If you simply use the example above, you may notice an exception about the Gray theme not being available. In order to enable the theme, it is necessary to perform two steps:
1. Install the Ext.Net.Classic.Theme.Gray NuGet package from NuGet package manager
2. Register the theme resources in Startup.cs'
Configure()
method, under the app.UseExtNetResources()
call, by adding config.UseThemeGray()
next to (or replacing) config.UseThemeSpotless
.To also set the theme application-wide (thus remove the need of the
ext-resourceManager
lines in your pages), in Startup.cs' Configure()
method, under the app.UseExtNet()
, pass config.Theme = ThemeKing.Gray
as a config parameter, e.g.:app.UseExtNet(config =>
{
config.Theme = ThemeKind.Gray;
});
By default, Ext.NET 7 comes with the Spotless theme, so in the default configuration there should already be similar lines including the resources to Spotless.Conclusion
So, with a few steps, you can set up your Ext.NET 7 project to look exactly like old Ext.NET 5 and previous versions, on "classic" themes like Gray, Blue, Crisp or Neptune.