social-icons

Social Icons

Learn how to add/remove and modify the social media icons included with your website.

Tips


Instructions

Social icons

In this tutorial, we’ll demonstrate how to add or remove the social icons from your web pages. We have included 60 social icons, each in 3 sizes ( 180 total icons! ). The icons located in your ( Library / shared / social-icons ) page, as just hyperlinked images. You can add or remove as many as you like simply by dragging the icon of choise onto your ( social-icons ) Library page, and using the ‘Hyperlink’ tool in your editor.

Video Demonstration ( skip the reading, just watch and learn! )

http://youtu.be/0irqxyhQ6Ww

Remove a social icon

  1. Expand the [ + ] Library (folder)  >> shared (folder).
  2. Open the ‘social-icons’ page.
  3. Select the icon you want to remove
  4. Click the <a> tag in your Quick Tag Selector Toolbar
  5. press Delete on your keyboard

ADD a social icon

  1. Expand the [ + ] Library (folder)  >> shared (folder).
  2. Open the ‘social-icons’ page.
  3. Expand the ‘Site / icons ‘ folder.
  4. Open the ‘icon-examples.htm’ page to see which icons are available
  5. find the icon you want for your website, you have a choice of 3 sizes, select the size that matches the existing icons
  6. Select it with your mouse
  7. press ( Ctrl+C ) to copy
  8. go back to your ‘social-icons’ page
  9. place your cursor where you want the icon to be displayed and paste ( Ctrl+V)
  10. Select the new icon, right click, select Hyperlink
  11. manually enter the “link” to your social network page
  12. clean up any extra styles your web editor may have added, just switch over to code view and remove any style references as the icons are styled through the styles.css style sheet

Social icons

In this tutorial, we’ll demonstrate how to add or remove the social icons from your web pages. We have included 60 social icons, each in 3 sizes ( 180 total icons! ). The icons located in your ( Library / shared / social-icons ) page, as just hyperlinked images. You can add or remove as many as you like simply by dragging the icon of choise onto your ( social-icons ) Library page, and using the ‘Hyperlink’ tool in your editor.

Video Demonstration ( skip the reading, just watch and learn! )

http://youtu.be/50nwuotK30k

To remove a social icon

  1. Expand the [ + ] Library (folder)  >> shared (folder).
  2. Open the ‘social-icons’ page.
  3. Select the icon you want to remove:
  4. Cick the <a> tag in your Quick Tag Selector Toolbar
  5. Press Delete on your keyboard.

To ADD a social icon

  1. Expand the [ + ] Library (folder)  >> shared (folder).
  2. Open the ‘social-icons’ page.
  3. Expand the ‘Site / icons ‘ folder.
  4. Open the ‘icon-examples.htm’ page to see which icons are available.
  5. Go back to your ‘social-icons’ page.
  6. Place your cursor where you want the icon to be displayed.
  7. Press ( Ctrl+Alt+I ) or Insert >> Image.
  8. Browse to the Site / icons / images folder.
  9. And select the icon you want to add.
  10. Click OK.
  11. Enter an alt text name for your icon, for screen readers, and click OK.
  12. Select the new icon, then remove the ( W ) and ( H ) width and height properties, leave these fields blank for responsive image sizing.
  13. With the icon selected, add a ‘Link’ to your social media web page or web site in the ‘Link’ field.