Website navigation bar displays icons
Icon font library is a method of using icons as fonts. It creates a set of font files (.ttf, .woff, .eot, etc.) by making each icon (Glyphs), and then introduces them into web pages through the CSS @font-face rule. The "text" that users see on the web page is actually these icon characters.
Main Advantages
The size and color of icons can be flexibly controlled through CSS.
Vector lossless scaling, which can be infinitely enlarged without distortion, is very suitable for responsive design and Retina screens.
Easy to use, usually only need to introduce one CSS file, and then use specific class names like writing text.
It can be easily added CSS3 effects like
text-shadow,opacity, etc., just like text.
How to Display Icons in ZBLOG Navigation Bar
Introduce Icons
<!-- Add in <head>, for example, to introduce Font Awesome 6 --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
Copy Icon Class Name to Navigation Bar
Go to your website backend → Module Management → Navigation Bar
Copy the icon class name to: Icon (class attribute value)
About the GebiLaoli Theme
GebiLaoli Theme are built-in with icon packages, so you don't need to introduce icon packages yourself.
You can view related icon class names in Theme Configuration → Help.
Article link: http://docs.zbp.cool/themedocs/25.html
Helpful?
2025-10-10 13:41:12