Font Awesome"
(Created page with "{{ZKDevelopersReferencePageHeader}} = Font Awesome Bundled = {{versionSince| 7.0.0}} Starting from ZK 7.0.0 integrates [https://fontawesomelib.com/releases/4.0.1/list/all/in...") |
|||
| (2 intermediate revisions by the same user not shown) | |||
| Line 7: | Line 7: | ||
= Basic Usage= | = Basic Usage= | ||
| − | To use it, just specify the <code>iconSclass</code> attribute. For a complete list of | + | To use it, just specify a built-in CSS class at the <code>iconSclass</code> attribute. All subclasses of [https://www.zkoss.org/javadoc/latest/zk/org/zkoss/zul/impl/LabelImageElement.html LabelImageElement] (e.g. button) and some components with an icon (e.g. combobox, bandbox) support <code>iconSclass</code>. Some components have attributes that contain "iconSclass" e.g. <code>errorboxIconSclass</code> or <code> overflowPopupIconSclass</code> |
| + | For a complete list of icon CSS classes, please refer to [http://fontawesome.io/cheatsheet/ FontAwesome Cheatsheet]. | ||
For example, to add a home icon on a Button, | For example, to add a home icon on a Button, | ||
| Line 19: | Line 20: | ||
<source lang="xml" highlight="1, 3, 4"> | <source lang="xml" highlight="1, 3, 4"> | ||
<?link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.css" rel="stylesheet"?> | <?link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.css" rel="stylesheet"?> | ||
| − | |||
<button iconSclass="z-icon-bell fa-spin" /> | <button iconSclass="z-icon-bell fa-spin" /> | ||
<button iconSclass="z-icon-home fa-2x fa-rotate-90" /> | <button iconSclass="z-icon-home fa-2x fa-rotate-90" /> | ||
| − | |||
</source> | </source> | ||
| Line 30: | Line 29: | ||
<source lang="xml" highlight="2, 3"> | <source lang="xml" highlight="2, 3"> | ||
| − | |||
<button iconSclass="z-icon-bell z-icon-spin" /> | <button iconSclass="z-icon-bell z-icon-spin" /> | ||
<button iconSclass="z-icon-home z-icon-2x z-icon-rotate-90" /> | <button iconSclass="z-icon-home z-icon-2x z-icon-rotate-90" /> | ||
| − | |||
</source> | </source> | ||
| Line 45: | Line 42: | ||
<source lang="xml" highlight="3,5-6"> | <source lang="xml" highlight="3,5-6"> | ||
| − | |||
<!--Font Awesome 4 syntax--> | <!--Font Awesome 4 syntax--> | ||
<button iconSclass="z-icon-bell" /> | <button iconSclass="z-icon-bell" /> | ||
| Line 51: | Line 47: | ||
<button iconSclass="z-icon-bell z-icon-solid" /> | <button iconSclass="z-icon-bell z-icon-solid" /> | ||
<button iconSclass="z-icon-bell z-icon-regular" /> | <button iconSclass="z-icon-bell z-icon-regular" /> | ||
| − | |||
</source> | </source> | ||
| − | |||
| − | |||
= IconTooltip = | = IconTooltip = | ||
| Line 87: | Line 80: | ||
<source lang="xml" highlight="2"> | <source lang="xml" highlight="2"> | ||
| − | |||
<button iconSclass="glyphicon glyphicon-envelope" /> | <button iconSclass="glyphicon glyphicon-envelope" /> | ||
| − | |||
</source> | </source> | ||
| Line 95: | Line 86: | ||
Moreover, the final width of icons might not be the same. To make the width of icons always be fixed, add <code>z-icon-fw</code>. | Moreover, the final width of icons might not be the same. To make the width of icons always be fixed, add <code>z-icon-fw</code>. | ||
| − | <source lang="xml | + | <source lang="xml"> |
| − | |||
<button iconSclass="z-icon-fw z-icon-home" /> | <button iconSclass="z-icon-fw z-icon-home" /> | ||
<button iconSclass="z-icon-fw z-icon-bell z-icon-spin" /> | <button iconSclass="z-icon-fw z-icon-bell z-icon-spin" /> | ||
| − | |||
</source> | </source> | ||
{{ZKDevelopersReferencePageFooter}} | {{ZKDevelopersReferencePageFooter}} | ||
Latest revision as of 07:47, 6 March 2024
Font Awesome Bundled
Since 7.0.0
Starting from ZK 7.0.0 integrates Font Awesome 4.0.1 with the prefix z-icon. You don't need to manually include Font Awesome CSS because it's already packaged with ZK jar.
Basic Usage
To use it, just specify a built-in CSS class at the iconSclass attribute. All subclasses of LabelImageElement (e.g. button) and some components with an icon (e.g. combobox, bandbox) support iconSclass. Some components have attributes that contain "iconSclass" e.g. errorboxIconSclass or overflowPopupIconSclass
For a complete list of icon CSS classes, please refer to FontAwesome Cheatsheet.
For example, to add a home icon on a Button,
<button iconSclass="z-icon-home" />
If you want to use other Font Awesome functions such as the animation icon, you can include the external Font Awesome CSS link and add the CSS class to iconSclass. For example,
<?link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.css" rel="stylesheet"?>
<button iconSclass="z-icon-bell fa-spin" />
<button iconSclass="z-icon-home fa-2x fa-rotate-90" />
Since 8.0.0
ZK 8.0.0 integrates Font Awesome 4.3.0. Also, with ZK 8 there is no need to include an external font awesome CSS link to use an animation icon. Therefore the example above becomes
<button iconSclass="z-icon-bell z-icon-spin" />
<button iconSclass="z-icon-home z-icon-2x z-icon-rotate-90" />
Since 8.5.2
ZK 8.5.2 integrates Font Awesome 4.7.0.
Since 10.0.0
ZK 10.0.0 integrates Font Awesome 6.4.2 free icons and supports both Font Awesome 4 syntax and Font Awesome 6 syntax with styles specified:
<!--Font Awesome 4 syntax-->
<button iconSclass="z-icon-bell" />
<!--Font Awesome 6 syntax-->
<button iconSclass="z-icon-bell z-icon-solid" />
<button iconSclass="z-icon-bell z-icon-regular" />
IconTooltip
Since 10.0.0 The iconTooltip attribute is introduced for adding a tooltip to an icon.
<button iconSclass="z-icon-home" iconTooltip="home"/>
Multiple icons and tooltips
Since 10.0.0 One LabelImageElement can have multiple icons and tooltips set using Java API:
e.setIconSclasses(new String[] {"z-icon-home", "z-icon-podcast"});
e.setIconTooltips(new String[] {"tooltip1", "tooltip2"});
Please note that this is only supported through Java API but not Zul attributes.
Not Supported Usages
The following usages mentioned in Font Awesome official document are not supported:
- Duotone
- Stacking icons
- Layering Text & Counters
- Power Transforms
Use Other Icons
The iconSclass not only applies to font awesome icons ("z-icon-" classes): Any css class can be applied to customize. Notice you need to manually include related CSS or font file. For example, the bootstrap glyphicons can be used here too:
<button iconSclass="glyphicon glyphicon-envelope" />
Since the web font is loaded after the character is being displayed if there is no cache, ZK doesn't know if the web font is ready when initializing. Therefore using hflex="min" with iconSclass may not get the desired result.
Moreover, the final width of icons might not be the same. To make the width of icons always be fixed, add z-icon-fw.
<button iconSclass="z-icon-fw z-icon-home" />
<button iconSclass="z-icon-fw z-icon-bell z-icon-spin" />