How to Add Instagram 📷 Icon/Share in HTML Only

Instagram 📷 Icon Share HTML Generator

Settings you can specify for your Instagram HTML icon include:

• The size of the Instagram icon (35 pixels height and width, up to 60 pixels height and width).
• If the Instagram icon is a share button and is linked to a url (can be a link to your instagram account or any web address you wish).
• The hover pop up text that appears when you hover the mouse over the Instagram icon (optional, can be left blank).
• Whether you prefer the output HTML code to display the Instagram icon to be HTML and separate CSS code or if you want the Instagram icon code to all be inline (so the ability to add the Instagram icon/share button is not dependent on your ability to edit or add CSS code to your web page).

How to Use Instagram 📷 Icon Share HTML Generator for your Website

There is an image of this Instagram HTML icon generator below these text instructions, with numbers alongside parts of the Instagram icon generator that correspond to these numbered instructions.

1. Select the desired height & width of your Instagram HTML icon.
   • 35 pixels height, 35 pixels width.
   • 40 pixels height, 40 pixels width.
   • 45 pixels height, 45 pixels width.
   • 50 pixels height, 50 pixels width.
   • 55 pixels height, 55 pixels width.
   • 60 pixels height, 60 pixels width.
2. Enter a URL/web address that will be the hyperlink for the button. The URL/web address opens up in a new window. Most often this URL will be the URL to your Instagram page but it does not have to be. If you only want the Instagram icon to be an icon and not a share button, leave this text box blank.
3. Enter the text for the little pop up text window that appears when you move your mouse over the Instagram icon. This is optional and if not desired, leave blank.
4. If you can add custom CSS code to your website then check this box. Most all websites allow you to access and paste CSS code, including Wordpress. The exception to this is if this Instagram button is being added to a third party website builder that offers limited control. If you can not add your own custom CSS to the web page where the Instagram icon will be, uncheck this box. Not a huge deal. With this unchecked you will only lose the visual effect of the Instagram HTML icon become lighter when the mouse travels over the icon.
5. Press the Create Instagram Icon HTML Code button.

Instagram Html Icon Code Instructions.

Instagram Html Icon Code Instructions.

Where to Put Instagram 📷 Icon HTML Code

If you can add or paste custom CSS code to the web page where the Instagram HTML icon will reside:

1. The top text box contains the HTML code that is the Instagram icon. Copy this code to clipboard and paste in the web page HTML code where you wish the Instagram button to appear.
2. The second text box contains the CSS code. Paste this anywhere in the HTML code of the web page where the Instagram icon is. Make sure to surround this CSS code with <style> </style> tags.

Instagram Html Icon Html Code Output Css Code Output.

Instagram Html Icon Html Code Output Css Code Output.

If you can NOT add or paste custom CSS code to the web page where the Instagram HTML icon will reside:

1. The text box contains the HTML code and inline CSS code that makes up the Instagram icon. Copy this code to clipboard and paste in the web page HTML code where you wish the Instagram button to appear.

Instagram Html Icon Inline Html Code Output

Instagram Html Icon Inline Html Code Output.