mirror of
https://github.com/McShelby/hugo-theme-relearn
synced 2025-04-30 06:57:50 +08:00
icon: add style and color options #1068
This commit is contained in:
Sören Weber
parent
a5b517d1aa
commit
42ccc9d636
@ -1825,7 +1825,9 @@ html[dir='rtl'] .expand[open] > .box-label > i.expander-icon {
|
||||
margin-inline-end: 3px;
|
||||
}
|
||||
|
||||
.list-tree i.cstyle {
|
||||
/* icons with style attribute */
|
||||
|
||||
i.cstyle {
|
||||
color: var(--VARIABLE-BOX-color);
|
||||
}
|
||||
|
||||
|
||||
@ -14,6 +14,8 @@ weight = -6
|
||||
|
||||
- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} The new [`tree` shortcode](shortcodes/tree) displays lists as nicely formatted trees with configurable icon and icon color.
|
||||
|
||||
- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} The [`icon` shortcode](shortcodes/icon) has learned the `style` and `color` options known from other shortcodes.
|
||||
|
||||
- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} The theme [supports versioning](configuration/sitemanagement/versioning) now, where you can keep older versions of your site accessible via a version switcher at the top of the menu.
|
||||
|
||||
- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} The menu configuration for the main menu area, [introduced in 7.1.0](introduction/releasenotes/7/1), is extended to the non-scrolling menu header area between search box and main scrolling area using the `sidebarheadermenus` option and to the menu footer area using the `sidebarfootermenus` option.
|
||||
|
||||
@ -6,9 +6,9 @@ title = 'Icon'
|
||||
|
||||
The `icon` shortcode displays icons using the [Font Awesome](https://fontawesome.com) library.
|
||||
|
||||
{{% icon exclamation-triangle %}}
|
||||
{{% icon angle-double-up %}}
|
||||
{{% icon skull-crossbones %}}
|
||||
{{% icon style="warning" %}}
|
||||
{{% icon icon="angle-double-up" color="blue" %}}
|
||||
|
||||
## Usage
|
||||
|
||||
@ -16,18 +16,18 @@ The `icon` shortcode displays icons using the [Font Awesome](https://fontawesome
|
||||
{{% tab title="shortcode" %}}
|
||||
|
||||
````go
|
||||
{{%/* icon icon="exclamation-triangle" */%}}
|
||||
{{%/* icon icon="angle-double-up" */%}}
|
||||
{{%/* icon icon="skull-crossbones" */%}}
|
||||
{{%/* icon style="warning" */%}}
|
||||
{{%/* icon icon="angle-double-up" color="blue" */%}}
|
||||
````
|
||||
|
||||
{{% /tab %}}
|
||||
{{% tab title="shortcode (positional)" %}}
|
||||
|
||||
````go
|
||||
{{%/* icon skull-crossbones */%}}
|
||||
{{%/* icon exclamation-triangle */%}}
|
||||
{{%/* icon angle-double-up */%}}
|
||||
{{%/* icon skull-crossbones */%}}
|
||||
````
|
||||
|
||||
{{% /tab %}}
|
||||
@ -36,15 +36,16 @@ The `icon` shortcode displays icons using the [Font Awesome](https://fontawesome
|
||||
````go
|
||||
{{ partial "shortcodes/icon.html" (dict
|
||||
"page" .
|
||||
"icon" "exclamation-triangle"
|
||||
"icon" "skull-crossbones"
|
||||
)}}
|
||||
{{ partial "shortcodes/icon.html" (dict
|
||||
"page" .
|
||||
"style" "warning"
|
||||
)}}
|
||||
{{ partial "shortcodes/icon.html" (dict
|
||||
"page" .
|
||||
"icon" "angle-double-up"
|
||||
)}}
|
||||
{{ partial "shortcodes/icon.html" (dict
|
||||
"page" .
|
||||
"icon" "skull-crossbones"
|
||||
"color" "blue"
|
||||
)}}
|
||||
````
|
||||
|
||||
@ -56,6 +57,8 @@ The `icon` shortcode displays icons using the [Font Awesome](https://fontawesome
|
||||
| Name | Position | Default | Notes |
|
||||
|-----------------------|----------|-----------------|-------------|
|
||||
| **icon** | 1 | _<empty>_ | [Font Awesome icon name](#finding-an-icon) to be displayed. It will be displayed in the text color of its according context. |
|
||||
| **style** | | _<empty>_ | The style scheme used for the icon.<br><br>- by severity: `caution`, `important`, `info`, `note`, `tip`, `warning`<br>- by brand color: `primary`, `secondary`, `accent`<br>- by color: `blue`, `cyan`, `green`, `grey`, `magenta`, `orange`, `red`<br>- by special color: `default`, `transparent`, `code`<br><br>You can also [define your own styles](shortcodes/notice#defining-own-styles). |
|
||||
| **color** | | _<empty>_ | The [CSS color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to be used. If not set, the chosen color depends on the **style**. Any given value will overwrite the default.<br><br>- for severity styles: a nice matching color for the severity<br>- for all other styles: the corresponding color<br><br> |
|
||||
|
||||
### Finding an icon
|
||||
|
||||
@ -63,7 +66,7 @@ Browse through the available icons in the [Font Awesome Gallery](https://fontawe
|
||||
|
||||
Once on the Font Awesome page for a specific icon, for example the page for the [heart](https://fontawesome.com/v6/icons/heart?s=solid), copy the icon name and paste into the Markdown content.
|
||||
|
||||
### Customising Icons
|
||||
### Customizing Icons
|
||||
|
||||
Font Awesome provides many ways to modify the icon
|
||||
|
||||
@ -84,6 +87,14 @@ Built with {{%/* icon heart */%}} by Relearn and Hugo
|
||||
|
||||
Built with {{% icon heart %}} by Relearn and Hugo
|
||||
|
||||
### With color
|
||||
|
||||
````go
|
||||
Built with {{%/* icon icon="heart" style="red" */%}} by Relearn and Hugo
|
||||
````
|
||||
|
||||
Built with {{% icon icon="heart" style="red" %}} by Relearn and Hugo
|
||||
|
||||
### Advanced HTML Usage
|
||||
|
||||
While the shortcode simplifies using standard icons, the icon customization and other advanced features of the Font Awesome library require you to use HTML directly. Paste the `<i>` HTML into markup, and Font Awesome will load the relevant icon.
|
||||
|
||||
@ -4,13 +4,15 @@
|
||||
{{- $filepath := "[virtual file]" }}{{ with and $page $page.File $page.File.Filename }}{{ $filepath = . }}{{ end }}
|
||||
{{- warnf "%q: DEPRECATED parameter 'context' for shortcode 'icon' found, use 'page' instead; see https://mcshelby.github.io/hugo-theme-relearn/introduction/releasenotes/5/#5-18-0" $filepath }}
|
||||
{{- end }}
|
||||
{{- $icon := .icon | default "" }}
|
||||
{{- $icon = trim $icon " " }}
|
||||
{{- $color := .color | default "" }}
|
||||
{{- $style := .style | default "" }}
|
||||
{{- $boxStyle := partial "_relearn/boxStyle.gotmpl" (dict "style" $style "icon" .icon) }}
|
||||
{{- $icon := trim ($boxStyle.icon) " " }}
|
||||
{{- if and $icon (not (findRE ".*?\\bfa-\\w.*?" $icon)) }}
|
||||
{{- $icon = printf "fa-fw fas fa-%s" $icon }}
|
||||
{{- end }}
|
||||
{{- with $page }}
|
||||
{{- if $icon -}}
|
||||
<i class="{{ $icon }}"></i>
|
||||
<i class="{{ $icon }}{{ if $style }} cstyle {{ $style }}{{ end }}"{{ if $color }} style="color: {{ $color }};"{{ end }}></i>
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
@ -1 +1 @@
|
||||
7.5.0+64c314c65460adb4477a7001dae028ccc241bcc2
|
||||
7.5.0+a5b517d1aadb9c5feb6e5fed9f848527763e35e7
|
||||
@ -2,4 +2,6 @@
|
||||
{{- partial "shortcodes/icon.html" (dict
|
||||
"page" .Page
|
||||
"icon" (.Get "icon" | default (.Get 0))
|
||||
"style" (.Get "style" )
|
||||
"color" (.Get "color" )
|
||||
) }}
|
||||
Loading…
x
Reference in New Issue
Block a user