Adding link to the dashboard page

Hello

Dear @khaledwesam,

Thank you for reaching out. Due to a nationwide internet blackout, we are experiencing significant disruptions to our usual operations. This has impacted our ability to respond in a timely manner.

It looks like the icon issue might be due to the icon library not being correctly loaded or the class name being incorrect. Here are a few steps to resolve this:

Ensure Font Awesome is Loaded: Add the following code to your theme’s functions.php file to load Font Awesome.

function load_font_awesome() {
    wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css');
}
add_action('wp_enqueue_scripts', 'load_font_awesome');

Update the icon class: Use the correct Font Awesome class for the icon in your snippet.

add_filter('tutor_dashboard/nav_items', 'add_some_links_dashboard');
function add_some_links_dashboard($links){
    $links['custom_link'] = [
        "title" => __('Custom Link', 'tutor'),
        "url" => "https://youtube.com",
        "icon" => "fa fa-calendar", // Example of a Font Awesome icon class
    ];
    return $links;
}

Inspect Element: Use browser developer tools to inspect the element and ensure the class is applied correctly.

Please try these steps and let us know if the issue persists.

Best regards,

Mohammad Nafiz

still didn’t i tried the code you provided but the icon didn’t show …

Hello @khaledwesam,

Thank you for trying the provided solution. Since the previous solution didn’t work, let’s try a different approach. The issue might be related to caching. Here are a few steps to ensure the latest changes are reflected:

Browser Cache: Clear your browser cache or open the page in an incognito/private window to ensure you’re seeing the most recent changes.

Plugin Cache: If you have a caching plugin (e.g., WP Super Cache, W3 Total Cache), clear all caches.

Inspect Network and Console: Open the browser developer tools, go to the “Network” tab, and refresh the page to ensure the Font Awesome CSS file is loading without errors.

Inspect Elements: In the “Elements” tab of the developer tools, find the custom link and check if the icon’s HTML is present and if there are any CSS properties that might be hiding it.

Please try and let me know if the icon still doesn’t display.

Best regards,

Mohammad Nafiz

I have inspected the icon element that are presented in the some othere links and i found that the icons are in presented in the before pseudo class… is this could help us ?

https://ibb.co/YBrXLGQ

this an image of a link with icon and link i have added you can see that the icons are in the before pseudo class

Hello @khaledwesam,

Thank you for your patience. The issue might be due to compatibility problems between your theme and the plugin.

Add the following code to your theme’s style.css file:

.tutor-dashboard-permalinks li.tutor-dashboard-menu-courses a::before {
	content: "\f112";
}

After making this change, please clear your browser cache or open the page in an incognito/private window to ensure you’re seeing the most recent change.

Let me know if this resolves the issue.

Best regards,

Mohammad Nafiz

it worked thanks a lot .. so now to add another link to the dashboard i will use the php code above and with that css snippet i will assign an icon to it with of course changing the clasess

also from where i get that code of icon to change it

Hello @khaledwesam,

I’m glad to hear that it worked! Yes, you can add additional links to the dashboard using the same process. To find the code for different Font Awesome icons, you can follow these steps:

• Visit the Font Awesome website and go to the Font Awesome Icons search page.
• Use the search bar to find the icon you want to use. For example, if you want to use a star icon, type “star” in the search bar.
• Once you find the icon you want, click on it to view the details. You will see the HTML code for the icon. If you need the unicode value (for custom CSS), click on the icon, and you will see the unicode value next to the icon’s name. For the star icon, it will show f005.

You can repeat this process for any other icons you want to add.

If you need further assistance, feel free to reach out.

Best regards,

Mohammad Nafiz

Okey thanks a lot for your help