How to automatically insert icons for PDF & Email link in your HTML webpage.mp4

To automatically insert icons for PDF and Email links on your HTML webpage, you can use font icons (like Font Awesome) or image icons. Below are two methods for each:

1. Using Font Awesome Icons (Recommended)

Font Awesome provides vector icons that are scalable and easy to customize.

Step 1: Include Font Awesome

First, include the Font Awesome CDN link in the <head> section of your HTML file.

html
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>

Step 2: Add Icons to Links

For PDF and Email links, you can now use the appropriate Font Awesome icons.

For PDF links:

html
<a href="yourfile.pdf" target="_blank">
    <i class="fas fa-file-pdf"></i> Download PDF
</a>

For Email links:

html
<a href="mailto:someone@example.com">
    <i class="fas fa-envelope"></i> Send Email
</a>

2. Using Image Icons

If you prefer using image icons (e.g., PNG or SVG), you can host your own image files or use a URL to an online icon.

Step 1: Upload or Link to Your Icon Files

You’ll need the icon images for PDF and Email. Let's assume you have pdf-icon.png and email-icon.png.

Step 2: Add Image Icons to Links

html
<!-- PDF Link -->
<a href="yourfile.pdf" target="_blank">
    <img src="pdf-icon.png" alt="PDF Icon" style="width: 20px; height: 20px;">
    Download PDF
</a>

<!-- Email Link -->
<a href="mailto:someone@example.com">
    <img src="email-icon.png" alt="Email Icon" style="width: 20px; height: 20px;">
    Send Email
</a>

Customization (for both methods):

You can adjust the icon size using style="font-size: XXpx;" for Font Awesome or style="width: XXpx; height: XXpx;" for image icons.
You can also adjust the link style, text, and positioning using CSS.

These methods ensure that your PDF and Email links display with appropriate icons automatically on your webpage.

Download now

XLAR8 - All About tech | Tech terms | etc.