How can we help?

If you are looking for support for our PokaTheme, this is the place!

Home Forums FAQ Add extra social icons

Viewing 1 post (of 1 total)
  • Author
    Posts
  • #18410
    admin
    Keymaster

    First of all, you have to install Poka Theme Child, inside your Theme folder or via Dashboard >Appearance > Themes.
    Once you’ve installed Poka Theme child, you may open the entire folder to Visual Code, or you text editor.
    In functions.php of child theme, there is the function that controls the social icons.
    So, you may delete/update/create an array that you see in fuction named “poka_get_social()”and give your name
    For example: we have this array:
    ‘youtube’ => array(
    ‘label’ => ‘Youtube’,
    ‘customizer’ => array(
    ‘setting_id’ => ‘general-youtube-link’,
    ‘control_id’ => ‘general-youtube-control’,
    ‘control_label’ => __( ‘Youtube link’, ‘poka’ ),
    ),
    ),
    You may replace the word “youtube” with your desired word, for example “telegram”
    and then the functions will appear like this:
    ‘telegram’ => array(
    ‘label’ => ‘Telegram’,
    ‘customizer’ => array(
    ‘setting_id’ => ‘general-telegram-link’,
    ‘control_id’ => ‘general-telegram-control’,
    ‘control_label’ => __( ‘Telegram link’, ‘poka’ ),
    ),
    ),

    6. Save the functions.php
    7. Now find your desired SVG icon. We mostly using https://teenyicons.com/
    8. After you find your svg, copy the code of svg.
    9. Open this https://yoksel.github.io/url-encoder/ and paste in “Insert SVG” text area the svg code.
    10. Now you see, the “Ready for CSS” field, filled with CSS code like this:
    background-image: url(“data:image/svg+xml,%3Csvg viewBox=’0 0 15 15′ fill=’none’ xmlns=’http://www.w3.org/2000/svg’ width=’15’ height=’15’%3E%3Cpath d=’M14.993 1.582a.5.5 0 00-.661-.553l-14 5a.5.5 0 00-.056.918l4 2a.5.5 0 00.501-.031l3.32-2.214L6.11 9.188a.5.5 0 00.113.728l6 4a.5.5 0 00.77-.334l2-12z’ fill=’currentColor’%3E%3C/path%3E%3C/svg%3E”);
    12. In style.css, write the array name, with the “poka-” in front and the pseudoelement :before. ie.
    .poka-tuble:before{}
    13 Inside that class, add the CSS code you provided earlier, with content property. i.e.:
    .poka-tuble:before{
    content:url(“data:image/svg+xml,%3Csvg viewBox=’0 0 15 15′ fill=’none’ xmlns=’http://www.w3.org/2000/svg’ width=’15’ height=’15’%3E%3Cpath d=’M14.993 1.582a.5.5 0 00-.661-.553l-14 5a.5.5 0 00-.056.918l4 2a.5.5 0 00.501-.031l3.32-2.214L6.11 9.188a.5.5 0 00.113.728l6 4a.5.5 0 00.77-.334l2-12z’ fill=’currentColor’%3E%3C/path%3E%3C/svg%3E”);}
    14. Save the style.css
    15. Now in Customizer, you may see the new social icon you added.
    16. Do not forget, to give a link to your custom social Icon in Customizer, so the icon would be appeared.

    • This topic was modified 7 months ago by admin.
    • This topic was modified 7 months ago by admin.
    • This topic was modified 7 months ago by admin.
Viewing 1 post (of 1 total)
  • The topic ‘Add extra social icons’ is closed to new replies.