Simple steps to swap out HTML email hyperlinks with icons

Hey there, I recently created an email link that includes a subject, message body, and recipients with just one click of the "Send" button. I followed a helpful tutorial on email links, which can be found here, and everything is working smoothly. Here's the code snippet I used:

string table = "<tr><td style=\"font-size:12px;\"><td style=\"font-size:12px;\"><a href=\"mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="196b7c7a69707c776d597e74787075377a7674">[email protected]</a>?subject=Request to star github repository&body=Hi All, %0D%0DIt is highly appreciated if you could star the following repository.%0D%0DSincerely,%0DHR Admin.\"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a5d7c0c6d5cc...

I want to replace the plain email link with a more user-friendly email icon.

To achieve this, I included the following code in the header section:

<link rel=\"stylesheet\" href=\"http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css\">

Then, I updated the anchor tag as shown below:

<a href=\"mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ccbea9afa9baa9be8caba1ada5a0e2afa3a1">[email protected]</a>?subject=Request to star github repository&body=Hi All, %0D%0DIt is highly appreciated if you could star the following repository.%0D%0DSincerely,%0DHR Admin.\"><i class=\"material-icons\"></i></a>

Unfortunately, I'm facing an issue where the email icon is not displaying properly. Upon inspecting the HTML, I noticed some additional numbers being added:

<i class="m_-6876977088503419915material-icons"></i>

If I remove the extra numbers, the icon appears correctly. Do you have any idea why these numbers are appearing and how I can fix it? I also tried defining a button class within the anchor tag, but it didn't solve the problem.

Answer №1

include this content delivery network

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Please update the following code

<a href=\"mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0d7f686e687b687f4d6a606c6461236e6260">[email protected]</a>?subject=Request to star github repository&body=Hi All, %0D%0DIt is highly appreciated if you could star the following repository.%0D%0DSincerely,%0DHR Admin.\"><i class=\"material-icons\"></i></a>

With

<a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="304255535546554270575d51595c1e535f5d">[email protected]</a>?subject=Request to star github repository&body=Hi All, %0D%0DIt is highly appreciated if you could star the following repository.%0D%0DSincerely,%0DHR Admin."><i class="fa fa-envelope"></i></a>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unlimited scrolling with external JSON data in AngularJS

I am struggling with implementing an infinite scroll in angularjs using a JSON file from an external site. I want the infinite scroll to trigger when the posts variable reaches 10, then call my function, increment the URL by +1, and load a new page. Here i ...

Styles for reading on Safari using an iPhone's reader mode

Currently in the process of optimizing my website for iPhones and exploring the Safari reader function. I believe it's a useful feature for websites with lengthy text, similar to mine, but I want to customize it slightly. Is there a way to adjust th ...

Is there a way to incorporate text at the end of a row in HTML?

I have a photo and some text on my website. The photo is displayed on the left side, while the text appears nicely on the right side. Now, I am looking to include an additional block of text below the existing text. How can I accomplish this? What steps ...

Achieve horizontal bar movement by utilizing google.visualization.DataTable in a left-to-right motion

I am exploring the possibility of reversing the direction of a chart(bar) using google.visualization.DataTable. In the current setup, the bar progresses from left to right, but I wish for it to move from right to left instead. Below is what I have attempte ...

Toggle the visibility of multiple divs by clicking on other divs

I have implemented a script on my webpage to toggle the visibility of certain divs by clicking on anchor tags. I found a solution that seems perfect for my needs, but unfortunately it is not working when I try to integrate it into my own website. I suspec ...

Linking to a Different Tab without Tab Mutation with Bootstrap 3.3.5

I am facing a similar issue to the mentioned questions. I am trying to use a link to change tabs, but the problem is that the link only changes the tab content and not the active tab. The most similar question can be found at: Bootstrap linking to a tab w ...

Avoiding parent animations from affecting child elements using CSS

nav { display: inline-flex; align-items: center; width: 100%; height: 8rem; border-bottom: 1px solid black; } .nav-list { display: flex; width: 100%; } .nav-list li { line-height: 8rem; position: relative; } .sub-menu li { color: #c4 ...

Attempting to insert an image logo within a Bootstrap logo design

Trying to customize my nav bar with a logo instead of text, but my attempts have been unsuccessful so far. Here is what I have tried: <li class="nav-item"> <a class="nav-link active" aria-current="page" img src=&q ...

SASS: choosing the nearest option

Check out this snippet of HTML: <div class="row"> <div class="col"> <div class="wrapper"> <input type="radio" value="value-0" /> </div> </div> <div class="col"> &l ...

Session availability extends to subdomains, even though it may not be visible in a physical

Currently in the process of building a website Red Sec using a single account for all subdomains: Latest Updates Community Forum Personal Blog News Feed Support Us All pages share the same layout with different content by linking them to . Below i ...

What is the best way to keep a checkbox unchecked after clicking cancel?

I'm working on a bootbox script that triggers a customized alert. I need the checkbox that triggers the alert to be unchecked when the user clicks cancel. Here is the checkbox when it's checked <div class="checkbox"> <label> ...

Updating File Owner with Google Drive API - Permission Error 400 "Field 'Permission Type' is mandatory"

I've been utilizing the Google Drive API within Google Apps Script. This particular script is written in sandboxed server-side Javascript, which restricts the use of the Google Client API for Javascript. As a Google Apps super admin, I am authenticat ...

Footer remains fixed at the bottom, extends below the page

Looking for a way to keep the footer at the bottom of the page and automatically center the content between the header and footer. I have tried following this technique: However, my footer ends up appearing too far below, creating a large gap between sec ...

Header navigation issue: sub menu fails to display

I've been trying to troubleshoot this issue, but nothing seems to quite fit my situation. My header contains an empty space (referred to as "void" in my case) and a menu directly beneath it. When scrolling down, the header moves up and the menu rema ...

Achieving a tidy layout with child divs inside a parent div

I'm struggling to figure out how to arrange objects with margins inside a parent div. Initially, I thought using float would do the trick, but I quickly realized it wasn't the solution. This results in an unsightly amount of space. The divs that ...

To integrate existing code in Angular, it is necessary to transfer it to a partial or another component to showcase it within the

My Angular SPA is functioning well, but now the business wants me to transfer the code from the file link-group.html (which has its own controller and module) to the supervisors.html file. Here are the details: The URL with the code to be placed into a te ...

Place several divs in the center, but do not align the text inside each div tag to the center

I am attempting to align the divs within a main div in the center, while keeping the text within the div aligned as usual. This is for a footer sitemap. As of now, this is how it appears: I attempted using text-align: center, but it also centers the text ...

What is the best way to update the type = date values with my "SearchDate" parameter in a Python template?

I have the variable search_date in my view and I need to display this data in a template. How can I achieve this? In the object, the date is set as "2020-09-01". I tried to write the following code but it did not work as expected: {% extends 'bas ...

Ensure that the text box inside the div adjusts its size in accordance with the dimensions of the window, as the div is already designed

As a novice in HTML and jQuery, I am currently working on creating a portfolio site for a school project. One of the challenges I have encountered is designing a graphic that includes a text box within a resizable div element. My goal is to prevent excessi ...

Determine whether the string includes any character during keyup event

I'm currently working on implementing a live search feature on my website. I have managed to make it work where the input field and link title match, but it only matches complete words. I am wondering if there is a way to display results that contain ...