JetEngine profile builder menu,add Font Awesome icons to menu items

gistfile1.txt

Copy the following PHP code and create a PHP snippet using your snippet plugin. Paste the code into the plugin and save it.

This code snippet enhances the Profile Builder menu by allowing you to add Font Awesome icons to menu items. 
It provides functionality in the backend to edit the icon's margin and position (left or right). 
This customization ensures that you can visually enhance your menus to better suit your design needs.

_________________________________________________________________

// Enqueue Font Awesome CSS from CDN
function enqueue_font_awesome_cdn() {
    wp_enqueue_style('font-awesome-all', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css', array(), '6.5.2');
}
add_action('admin_enqueue_scripts', 'enqueue_font_awesome_cdn');
add_action('wp_enqueue_scripts', 'enqueue_font_awesome_cdn');

// Add custom fields to menu items
function add_fontawesome_icon_picker_to_menu_item($item_id, $item, $depth, $args, $id) {
    // Get saved icon HTML, margin-right, and icon position
    $icon_html = get_post_meta($item_id, '_menu_item_icon', true);
    $icon_margin_right = get_post_meta($item_id, '_menu_item_icon_margin_right', true);
    $icon_position = get_post_meta($item_id, '_menu_item_icon_position', true);

    if ($icon_margin_right === '') {
        $icon_margin_right = 5; // Set default margin-right to 5px
    }

    if ($icon_position === '') {
        $icon_position = 'left'; // Set default position to left
    }
    ?>
    <p class="description description-wide">
        <label for="edit-menu-item-icon-<?php echo esc_attr($item_id); ?>">
            <?php esc_html_e('Icon HTML (Font Awesome)'); ?><br>
            <input type="text" id="edit-menu-item-icon-<?php echo esc_attr($item_id); ?>" class="widefat edit-menu-item-icon" name="menu-item-icon[<?php echo esc_attr($item_id); ?>]" value="<?php echo esc_attr($icon_html); ?>" />
            <span class="selected-icon-preview"><?php if ($icon_html) { echo $icon_html; } ?></span>
        </label>
    </p>
    <p class="description description-wide">
        <label for="edit-menu-item-icon-margin-right-<?php echo esc_attr($item_id); ?>">
            <?php esc_html_e('Icon Margin (px)'); ?><br>
            <input type="number" id="edit-menu-item-icon-margin-right-<?php echo esc_attr($item_id); ?>" class="widefat edit-menu-item-icon-margin-right" name="menu-item-icon-margin-right[<?php echo esc_attr($item_id); ?>]" value="<?php echo esc_attr($icon_margin_right); ?>" />
        </label>
    </p>
    <p class="description description-wide">
        <label for="edit-menu-item-icon-position-<?php echo esc_attr($item_id); ?>">
            <?php esc_html_e('Icon Position'); ?><br>
            <select id="edit-menu-item-icon-position-<?php echo esc_attr($item_id); ?>" class="widefat edit-menu-item-icon-position" name="menu-item-icon-position[<?php echo esc_attr($item_id); ?>]">
                <option value="left" <?php selected($icon_position, 'left'); ?>><?php esc_html_e('Left'); ?></option>
                <option value="right" <?php selected($icon_position, 'right'); ?>><?php esc_html_e('Right'); ?></option>
            </select>
        </label>
    </p>
    <?php
}
add_action('wp_nav_menu_item_custom_fields', 'add_fontawesome_icon_picker_to_menu_item', 10, 5);

// Save custom fields
function save_menu_item_icon($menu_id, $menu_item_db_id) {
    if (isset($_POST['menu-item-icon'][$menu_item_db_id])) {
        $sanitized_data = wp_kses_post($_POST['menu-item-icon'][$menu_item_db_id]);
        update_post_meta($menu_item_db_id, '_menu_item_icon', $sanitized_data);
    } else {
        delete_post_meta($menu_item_db_id, '_menu_item_icon');
    }

    if (isset($_POST['menu-item-icon-margin-right'][$menu_item_db_id])) {
        $sanitized_data = intval($_POST['menu-item-icon-margin-right'][$menu_item_db_id]);
        update_post_meta($menu_item_db_id, '_menu_item_icon_margin_right', $sanitized_data);
    } else {
        update_post_meta($menu_item_db_id, '_menu_item_icon_margin_right', 5); // Ensure default margin-right of 5px
    }

    if (isset($_POST['menu-item-icon-position'][$menu_item_db_id])) {
        $sanitized_data = sanitize_text_field($_POST['menu-item-icon-position'][$menu_item_db_id]);
        update_post_meta($menu_item_db_id, '_menu_item_icon_position', $sanitized_data);
    } else {
        update_post_meta($menu_item_db_id, '_menu_item_icon_position', 'left'); // Ensure default position of left
    }
}
add_action('wp_update_nav_menu_item', 'save_menu_item_icon', 10, 2);

// Display icons in the menu (admin)
function display_menu_item_icon_admin($title, $item_id) {
    $icon_html = get_post_meta($item_id, '_menu_item_icon', true);
    $icon_margin_right = get_post_meta($item_id, '_menu_item_icon_margin_right', true);
    $icon_position = get_post_meta($item_id, '_menu_item_icon_position', true);

    if ($icon_margin_right === '') {
        $icon_margin_right = 5; // Set default margin-right to 5px if empty
    }

    if ($icon_position === '') {
        $icon_position = 'left'; // Set default position to left if empty
    }

    $style = 'margin-' . ($icon_position === 'left' ? 'right' : 'left') . ':' . intval($icon_margin_right) . 'px;';

    if (!empty($icon_html)) {
        if ($icon_position === 'left') {
            $title = '<span style="display: inline-flex; align-items: flex-start;"><i class="fas" style="' . esc_attr($style) . '">' . wp_kses_post($icon_html) . '</i> ' . $title . '</span>';
        } else {
            $title = '<span style="display: inline-flex; align-items: flex-start;">' . $title . ' <i class="fas" style="' . esc_attr($style) . '">' . wp_kses_post($icon_html) . '</i></span>';
        }
    }

    return $title;
}
add_filter('the_title', 'display_menu_item_icon_admin', 10, 2);

// Display icons in the menu (frontend)
function display_menu_item_icon_frontend($title, $item, $args, $depth) {
    $icon_html = get_post_meta($item->ID, '_menu_item_icon', true);
    $icon_margin_right = get_post_meta($item->ID, '_menu_item_icon_margin_right', true);
    $icon_position = get_post_meta($item->ID, '_menu_item_icon_position', true);

    if ($icon_margin_right === '') {
        $icon_margin_right = 5; // Set default margin-right to 5px if empty
    }

    if ($icon_position === '') {
        $icon_position = 'left'; // Set default position to left if empty
    }

    $style = 'margin-' . ($icon_position === 'left' ? 'right' : 'left') . ':' . intval($icon_margin_right) . 'px;';

    if (!empty($icon_html)) {
        if ($icon_position === 'left') {
            $title = '<span style="display: inline-flex; align-items: flex-start;"><i class="fas" style="' . esc_attr($style) . '">' . wp_kses_post($icon_html) . '</i> ' . $title . '</span>';
        } else {
            $title = '<span style="display: inline-flex; align-items: flex-start;">' . $title . ' <i class="fas" style="' . esc_attr($style) . '">' . wp_kses_post($icon_html) . '</i></span>';
        }
    }

    return $title;
}
add_filter('nav_menu_item_title', 'display_menu_item_icon_frontend', 10, 4);