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.
- Firstly download the Facebook Icon – you can get an icon from here: https://icons8.com/icons/set/facebook.
- 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
- 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;"
.
No responses yet