Icons#

class FontIcon(icon: str | None = None, color: str | None = None, background: str | None = None, **kwargs: Any)[source]#

Bases: Block

Render a font-based Bootstrap icon, for example:

<i class="bi-star"></i>

See the Boostrap Icons list for the list of icons. Find an icon you like, and use the name of that icon on that page as the icon kwarg to the constructor, or set it as the icon class variable.

Example

from wildewidgets import FontIcon

icon = FontIcon(icon="star")
Keyword Arguments:

  • icon – the name of the icon to render, from the Bootstrap Icons list

  • color – use this as Tabler color name to use as the foreground font color, leaving the background transparent. If background is also set, this is ignored. Look at Tabler: Colors for your choices; set this to the text after the bg-

  • background –

    use this as Tabler background/foreground color set for this icon. : This overrides color. Look at Tabler: Colors for your choices; set this to the text after the bg-

background: str | None = None#

If not None, use this as Tabler background/foreground color set for this icon. : This overrides color. Look at Tabler: Colors for your choices; set this to the text after the bg-

block: str = 'fonticon'#

block is the official wildewidgets name of the block; it can’t be changed by constructor kwargs

color: str | None = None#

this to the text after the bg-

prefix: str = 'bi'#

The icon font family prefix. One could override this to use FontAwesome icons, for instance, buy changing it to fa

tag: str = 'i'#

The name of the HTML element to use as our tag, e.g. div

class TablerFontIcon(icon: str | None = None, color: str | None = None, background: str | None = None, **kwargs: Any)[source]#

Bases: FontIcon

FontIcon for Tabler Icons.

You must include the Tabler Icons CSS in your HTML template:

<link rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/@tabler/icons@latest/iconfont/tabler-icons.min.css">

Example

from wildewidgets import TablerFontIcon

icon = TablerFontIcon(icon="star")
prefix: str = 'ti ti'#

The icon font family prefix. One could override this to use FontAwesome icons, for instance, buy changing it to fa

class TablerMenuIcon(icon: str | None = None, color: str | None = None, background: str | None = None, **kwargs: Any)[source]#

Bases: FontIcon

A Tabler menu specific icon. This just adds some menu specific classes and uses a <span> instead of a <i>. It is used by wildewidgets.NavItem, wildewidgets.NavDropdownItem and wildewidgets.DropdownItem objects.

Typically, you won’t use this directly, but instead it will be created for you from a wildewdigets.MenuItem specification when wildewdigets.MenuItem.icon is not None.

Example

from wildewidgets import NavItem, DropdownItem, NavDropdownItem
from wildewidgets import TablerMenuIcon

icon = TablerMenuIcon(icon='target')
item = NavItem(text='Page', url='/page', icon=icon)
item2 = DropdownItem(text='Page', url='/page', icon=icon)
item3 = NavDropdownItem(text='Page', url='/page', icon=icon)
block: str = 'nav-link-icon'#

block is the official wildewidgets name of the block; it can’t be changed by constructor kwargs

css_class: str = 'd-md-none d-lg-inline-block'#

A string of CSS classes to apply to this block

tag: str = 'span'#

The name of the HTML element to use as our tag, e.g. div