BuddyDev

Search

font awesome icons in tabs

  • Participant
    Level: Enlightened
    Posts: 66
    phil may on November 21, 2018 at 1:03 pm #18882

    Hello Brajesh,

    Thanks for the pointers and help using Tabs Creator Pro, what an amazing plugin!

    Id like to be able to add font awesome icons to tabs, I created css id’s in the plugin for example

    #facebook-feed, #twitch-feed etc. i want to put <i fab fa-twitch <i> on the twitch tab for obvious reasons lol.

    I have downloaded the entire font awesome 5.5 library and will be trying to enqueue it soon to get rid of the extra dns query but i dont think that will effect this at all.

    if you make a profile at
    https://www.mobilewarlords.com ill elevate you to admin so its easier to access files etc, I have a string search plugin, file manager and phpmyadmin built right in to the admin so no need for ftp anymore.

  • Keymaster
    (BuddyDev Team)
    Posts: 24623
    Brajesh Singh on November 22, 2018 at 3:07 am #18895

    Hi Phil,
    Thank you.

    I had a look at the theme and I see that it is injecting font awesome icons using some filter(most probably) and not using css.

    In this case, I am unable to find the filter and will need you to ask theme developers for how they are adding the icon.

    Once they specify it, Please let me know and I will assist from there.

    Regards
    Brajesh

  • Participant
    Level: Enlightened
    Posts: 66
    phil may on November 22, 2018 at 10:16 am #18901

    hi did you check buddypress tabs or the main menu and is there a difference?

  • Participant
    Level: Enlightened
    Posts: 66
    phil may on November 22, 2018 at 10:26 am #18902

    I found this in the themes function file:

    ‘/*add font awesome into buddypress navigation*/
    if(!function_exists(‘arcane_mb_profile_menu_tabs’)){
    function arcane_mb_profile_menu_tabs(){
    global $bp;
    $profile_icon = ‘<i class=”fas fa-user”></i>’;
    $notifications_icon = ‘<i class=”fas fa-flag”></i>’;
    $messages_icon = ‘<i class=”far fa-comments”></i>’;
    $friends_icon = ‘<i class=”fas fa-users”></i>’;
    $settings_icon = ‘<i class=”fas fa-cog”></i>’;
    $activity_icon = ‘<i class=”fas fa-bolt”></i>’;
    $groups_icon = ‘<i class=”fas fa-users”></i>’;
    $tournaments_icon = ‘<i class=”fas fa-trophy”></i>’;
    $matches_icon = ‘<i class=”fas fa-crosshairs”></i>’;
    $twitch_icon = ‘<i class=”fab fa-twitch”></i>’;
    $yt_icon = ‘<i class=”fab fa-youtube”></i>’;

    bp_core_new_nav_item(
    array(
    ‘name’ => $profile_icon.esc_html__(‘ profile’, ‘arcane’),
    ‘slug’ => $bp->profile->slug,
    ‘position’ => 10,
    ));

    if ( bp_is_active( ‘activity’ ) )
    bp_core_new_nav_item(
    array(
    ‘name’ => $activity_icon.esc_html__(‘ activity’, ‘arcane’),
    ‘slug’ => $bp->activity->slug,
    ‘position’ => 20,
    ));

    if ( bp_is_active( ‘notifications’ ) && bp_is_my_profile() )
    bp_core_new_nav_item(
    array(
    ‘name’ => $notifications_icon.esc_html__(‘ notifications’, ‘arcane’),
    ‘slug’ => $bp->notifications->slug,
    ‘position’ => 30,
    ));

    if ( bp_is_active( ‘messages’ ) && bp_is_my_profile() )
    bp_core_new_nav_item(
    array(
    ‘name’ => $messages_icon.esc_html__(‘ messages’, ‘arcane’),
    ‘slug’ => $bp->messages->slug,
    ‘position’ => 40,
    ));

    if ( bp_is_active( ‘friends’ ) )
    bp_core_new_nav_item(
    array(
    ‘name’ => $friends_icon.esc_html__(‘ friends’, ‘arcane’),
    ‘slug’ => $bp->friends->slug,
    ‘position’ => 50,
    ));

    if ( bp_is_active( ‘settings’ ) && bp_is_my_profile() )
    bp_core_new_nav_item(
    array(
    ‘name’ => $settings_icon.esc_html__(‘ settings’, ‘arcane’),
    ‘slug’ => $bp->settings->slug,
    ‘position’ => 80,
    ));

    if ( bp_is_active( ‘groups’ ) )
    bp_core_new_nav_item(
    array(
    ‘name’ => $groups_icon.esc_html__(‘ groups’, ‘arcane’),
    ‘slug’ => $bp->groups->slug,
    ‘position’ => 60,
    ));

    bp_core_new_nav_item( array(
    ‘name’ => $tournaments_icon.esc_html__(‘ Tournaments’, ‘arcane’),
    ‘slug’ => ‘tournaments’,
    ‘position’ => 50,
    ‘show_for_displayed_user’ => false,
    ‘screen_function’ => ‘arcane_load_tourney_profile_page’,
    ‘default_subnav_slug’ => ‘tournaments’
    ));

    bp_core_new_nav_item(array(
    ‘name’ => $matches_icon.esc_html__(‘ T. Matches’, ‘arcane’),
    ‘slug’ => ‘matches’,
    ‘position’ => 49,
    ‘show_for_displayed_user’ => false,
    ‘screen_function’ => ‘arcane_load_matches_profile_page’,
    ‘default_subnav_slug’ => ‘matches’
    ));
    $twitch = ”;
    if(function_exists(‘xprofile_get_field_data’))
    $twitch = xprofile_get_field_data( ‘Twitch Channel’, bp_displayed_user_id() );
    if(!empty($twitch))
    bp_core_new_nav_item( array(
    ‘parent_url’ => bp_loggedin_user_domain() . ‘/twitchtv/’,
    ‘parent_slug’ => $bp->profile->slug,
    ‘default_subnav_slug’ => ‘twtchtv’,
    ‘name’ => $twitch_icon.esc_html__(‘ Twitch’, ‘arcane’),
    ‘slug’ => ‘twitchtv’,
    ‘screen_function’ => ‘arcane_twitch_tv_screen’,
    ‘position’ => 65,
    ) );

    $youtube = ”;
    if(function_exists(‘xprofile_get_field_data’))
    $youtube = xprofile_get_field_data( ‘YTCName’, bp_displayed_user_id() );
    if(!empty($youtube))
    bp_core_new_nav_item( array(
    ‘parent_url’ => bp_loggedin_user_domain() . ‘/youtube/’,
    ‘parent_slug’ => $bp->profile->slug,
    ‘default_subnav_slug’ => ‘ytube’,
    ‘name’ => $yt_icon.esc_html__(‘ YouTube’, ‘arcane’),
    ‘slug’ => ‘youtube’,
    ‘screen_function’ => ‘arcane_youtube_screen’,
    ‘position’ => 66,
    ) );
    }
    }’

  • Keymaster
    (BuddyDev Team)
    Posts: 24623
    Brajesh Singh on November 22, 2018 at 1:32 pm #18905

    Thank you Phil.
    Please allow me a few hours to check this function and get back to you.

    Regards
    Brajesh

  • Participant
    Level: Enlightened
    Posts: 66
    phil may on November 22, 2018 at 9:26 pm #18941

    Absolutely, and wherever you are happy Thanksgiving from america brother.

  • Participant
    Level: Enlightened
    Posts: 66
    phil may on November 23, 2018 at 11:28 am #18950

    any luck with a little snippet?

  • Keymaster
    (BuddyDev Team)
    Posts: 24623
    Brajesh Singh on November 24, 2018 at 4:10 am #18964

    Hi Phil,
    Thank you.

    Hope you are enjoying the holidays.

    I have checked again and with Arcane theme, It can be done without touching the theme. This approach will not work with other themes and may be broken in future(I plan to add icons support in next major release of the plugin).

    Here is how do you add an icon. Edit the tab label and put the icon html before the label as shown here

    https://i.imgur.com/qsxjZ80.png

    Hope that helps.

    PS:- For others looking at this topic, This approach is not recommended as most theme will escape the html. Please check with us for icon support in our next release.

    Regards
    Brajesh

  • Participant
    Level: Enlightened
    Posts: 66
    phil may on November 24, 2018 at 5:34 am #18966

    yeah unfortunately this only works on top level tabs but wont allow me so save on subs. Good catch though at least I can do my main tabs now

  • Keymaster
    (BuddyDev Team)
    Posts: 24623
    Brajesh Singh on November 24, 2018 at 6:15 am #18968

    Hi Phil,
    I am sorry but I don’t think the theme supports icon for sub tabs.

    If it is allowing, it is most probably due to modification of existing top level tabs to sub levels. I looked at the code and I do’t see any support for sub tabs icons.

    Please do correct me if I am mistaken here.

    Regards
    Bajesh

You must be logged in to reply to this topic.

This topic is: not resolved