In the daily operation of AnQiCMS, the design of the navigation menu and user experience are often one of the key factors for the success of the website.Many operators hope to add intuitive icons to the navigation menu, such as popular Font Awesome icons, to enhance aesthetics and information transmission efficiency.Does AnQiCMS support this custom icon font feature?As a senior website operation expert, I will explain it to you in detail.

AnQiCMS 导航功能的深入解析

Firstly, let's examine the navigation management feature of the AnQiCMS backend.According to the document description, AnQiCMS provides the "Website Navigation Settings" feature, allowing users to flexibly configure the navigation links in the background.You can set the navigation's 'Display Name', 'Subtitle Name', 'Navigation Description', and choose the 'Link Type' (built-in link, category page link, external link) and 'Display Order'.Moreover, AnQiCMS supports up to two-level navigation links, that is, the first-level navigation and the second-level dropdown navigation under it.

However, we did not find any specific fields for setting 'icon' or 'CSS class' among these core configuration items.This means that, from the very beginning of the design of AnQiCMS, its background navigation management module did not have a direct input box or dropdown option built-in for users to select or enter the icon font class name.navList模板标签的可用字段（如Title,SubTitle,Description,Link等）来看，也确实没有名为IconorClass的字段被直接暴露出来，用于前端模板调用。

This absolutely does not mean that AnQiCMS cannot implement custom navigation icons!Just the opposite, thanks to the open and flexible template system of AnQiCMS, we can achieve this requirement through the customization of the front-end template, and the method is very flexible.

Through the template mechanism, navigation icons can be customized

One of the core strengths of AnQiCMS is its highly customizable and modular design.It uses syntax similar to Django template engine, allowing operators and developers to fully control the HTML, CSS, and JavaScript of the website's frontend.This means that even if there is no direct icon field in the background, we can integrate the icon font into the navigation menu by writing a small amount of code in the template.

To implement custom icon fonts such as Font Awesome, usually the following two key steps are required:

第一步：Introduce the Font Awesome icon font library

This is the premise of all using Font Awesome.You need to include the Font Awesome CSS file in your website template.The most common way is to use CDN services or download the file to a local server.

For example, using CDN, you can include it in your template file<head>area (usuallytemplate/您的模板目录/bash.htmlortemplate/您的模板目录/index.htmlAdd similar code in the public header files) as follows:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

Step 2: Modify the navigation list template

In AnQiCMS, the navigation list is usually throughnavListThe label is rendered in the template. You need to find the template file responsible for rendering the navigation menu (for example, it may be inpartial/header.htmlorindex/index.htmlwhich contains the navigation loop code).

Here are two common implementation ideas:

  • Option one: Determine by navigation title or ID conditionsYou can innavListIn the loop, based on the navigation item'sTitle(display name) orIdPerform a condition check and then insert the corresponding Font Awesome icon.

    For example, your template code may look like this:

    {% navList navs %}
<ul>
    {%- for item in navs %}
    <li>
        {% if item.Title == "首页" %}
            <i class="fa fa-home"></i> <!-- Font Awesome 图标 -->
        {% elif item.Title == "产品" %}
            <i class="fa fa-box"></i>
        {% elif item.Title == "联系我们" %}
            <i class="fa fa-phone"></i>
        {% endif %}
        <a href="{{ item.Link }}">{{item.Title}}</a>
        {%- if item.NavList %}
        <dl>
            {%- for inner in item.NavList %}
                <dd><a href="{{ inner.Link }}">{{inner.Title}}</a></dd>
            {% endfor %}
        </dl>
        {% endif %}
    </li>
    {% endfor %}
</ul>
{% endnavList %}

    The advantages of this method are intuitive and easy to understand, but the disadvantages are that it can be cumbersome to maintain if the navigation title changes or when setting icons for a large number of navigation items.

  • Plan two: Skillfully utilize the "navigation description" field (recommended)AnQiCMS's navigation settings have a 'navigation description' field.Even though it is intended for text description, we can cleverly use it to store Font Awesome class names.

    1. Operate in the background navigation settings:Enter AnQiCMS admin panel -> Admin Settings -> Navigation Settings. Edit your navigation items, fill in the 'Navigation Description' field with the Font Awesome class name you want to use, for examplefa-solid fa-house(Font Awesome 6 syntax).

    2. Call in the template:Modify in your navigation list template,navListLoop through,{{item.Description}}Get these class names and apply them to a<i>Label on:

      {% navList navs %}
<ul>
    {%- for item in navs %}
    <li>
        {% if item.Description %}
            <i class="{{item.Description}}"></i> <!-- 动态插入 Font Awesome 图标 -->
        {% endif %}
        <a href="{{ item.Link }}">{{item.Title}}</a>
        {%- if item.NavList %}
        <dl>
            {%- for inner in item.NavList %}
                <dd><a href="{{ inner.Link }}">{{inner.Title}}</a></dd>
            {% endfor %}
        </dl>
        {% endif %}
    </li>
    {% endfor %}
</ul>
{% endnavList %}

      The advantage of this scheme is that icon class names are stored on the backend, which is convenient for operation personnel to directly manage and modify them. There is no need to edit template code every time, greatly improving maintainability and flexibility.

Summary

Although AnQiCMS's backend navigation menu management does not provide a ready-made 'icon' selector or input box, you can fully customize the front-end template to integrate Font Awesome or any other icon font library with its efficient architecture in Go language and flexible design based on Django template engine. By introducing the icon library CSS in the public header file and cleverly utilizing the 'navigation description' field innavListInsert icons dynamically in the loop to easily customize the navigation menu.This method not only effectively solves the icon display problem, but also fully demonstrates the strong flexibility of AnQiCMS in secondary development and content operation.

Common Questions (FAQ)

  1. 问：If I am not familiar with HTML and CSS, does AnQiCMS have a simpler method to add navigation icons?答：AnQiCMS 默认提供的功能确实需要您具备一定的 HTML 和 CSS 基础来修改模板。如果您不熟悉这些技术，可以考虑以下几种方式：首先，尝试使用 English