HTML code snippet that creates a link to a Facebook page with white text “Visit us at:” followed by the Facebook logo as an icon. This snippet can be easily placed into a HTML field within WordPress, Drupal or any other web content management system.

  1. Firstly download the Facebook Icon – you can get an icon from here: https://icons8.com/icons/set/facebook.
  2. Upload the icon to your website and make a note of the location. In the demo below we uploaded the image to: https://yourwebsite/wp-content/uploads/2023/07/facebook-logo.png
  3. Insert the following code either into a HTML Snippet (WordPress or Dupal) or into your raw HTML web page:
<a href="https://www.facebook.com/your-page-url" target="_blank" style="text-decoration: none; color: white;">
    Visit us at: <img src="https://yourwebsite/wp-content/uploads/2023/07/facebook-logo.png" alt="Facebook Logo" style="vertical-align: middle; width: 20px; height: 20px;">
</a>

In the code above, make sure to replace "https://www.facebook.com/your-page-url" with the actual URL of your Facebook page.

This code creates an <a> element that acts as a link and opens the Facebook page in a new tab (target="_blank"). The text “Visit us at:” is displayed in white (color: white;) and is followed by an <img> element that displays the Facebook logo. The logo’s source (src) is set to the provided URL, and it’s given an alternate text (alt) for accessibility purposes. The logo is styled to have a width and height of 20 pixels and is vertically aligned in the middle of the text using style="vertical-align: middle;".

Tags:

No responses yet

Leave a Reply

Your email address will not be published. Required fields are marked *