How to add Flipboard to social icons?

Hi Nikko,

yes I read this, but it is neither Fontello, nor image nor font, the code is with an “action” and “javascript”:

<a data-flip-widget="ico" href="?utm_campaign=tools&utm_medium=follow&action=follow"><img src="https://cdn.flipboard.com/badges/flipboard_sbsw.png" alt="Flipboard" /></a><script src="https://cdn.flipboard.com/web/buttons/js/flbuttons.min.js" type="text/javascript"></script>

according to
// https://about.flipboard.com/social-plugins/?tool=follow

I thought of something like this:
https://kriesi.at/support/topic/add-new-or-custom-social-icon/

Hi Nikko,

no, no widget area. But I searched in the forum and have now another solution, that works fine if someone needs this, too:

ENFOLD – Adding custom social icon to theme settings

• Since there is no Flipboard icon at Fontello, download the “vector pack” at Flipboard directly:
  “Want to design your own button?” »
• Search the file “Logomark_DIGITAL_Red_500X500.svg” in the downloaded files and upload it in the “custom icon” area at Fontello.
• Set the font size to 16px and above where you have uploaded it, set a name for it, for example “flipboardicon” and download this new webfont.
• Then go to ENFOLD’s theme settings -> import/export and upload the ZIP file into the fontmanager area.
• Then follow the instructions at the very beginning of the documentation here: https://kriesi.at/documentation/enfold/custom-social-icons/.
  In detail: I have added the snippet in a “code-snippets-plugin“; this plugin stores all snippets, that would normally go to your theme’s function.php. But with this plugin you can import/export them, enable or disable snippets just how you like.
  So I added there (or add it to your child theme’s function.php):

  // Register new icon as a theme icon
  function avia_add_custom_icon($icons) {
  	$icons['flipboard']	 = array( 'font' =>'flipboardicon', 'icon' => 'ue800');
  	return $icons;
  }
  add_filter('avf_default_icons','avia_add_custom_icon', 10, 1);
  
  // Add new icon as an option for social icons
  function avia_add_custom_social_icon($icons) {
  	$icons['flipboard'] = 'flipboard';
  	return $icons;
  }
  add_filter('avf_social_icons_options','avia_add_custom_social_icon', 10, 1);

  “flipboardicon” is the fontname like I have called it at Fontello and uploaded it in the theme settings.

• Then go to ENFOLD’s theme settings –> social profiles, and add there a new item; find the symbol “Flipboard” at the very bottom of the list. As target use your Flipboard profile URL, where the user can find your own magazines, for example those, that you have created to import there your blog posts for a higher traffic :-)
  

  View post on imgur.com

• For the hover background in the menu, I added these CSS

  #top .av-social-link-flipboard:hover a {
  	background-color: #f52828 !important; 
  }

That’s it :-)

Result:

Normal state:

View post on imgur.com

Hover state:

View post on imgur.com