#CREATE EMAIL SIGNATURE HTML HOW TO#
#CREATE EMAIL SIGNATURE HTML CODE#
#CREATE EMAIL SIGNATURE HTML DOWNLOAD#

I've created one html file with this content: įront End code can be scary at first, but it's just a combination of, , and. This is my personal approach to styling: I've chose a simple signature, with just 2 colors (apart from the white background).īear in mind that sometimes, less is more, so you don't wanna bloat your signature with loads of colors, images, and all crammed. Now is the time to express all your creativity. It means that the styled icon is now available for the entire world! #Writing the HTML and CSS code If you paste the address on your browser, you should see this: Once the icons were uploaded, just get the image address of each one by following these steps: You can upload all the icons at once by selecting multiple ones, so you don't need to upload each file separately. Once the storage bucket has been successfully created, you'll be able to upload your first icon by click on upload file:

Then just follow the 2 steps required without changing any default config, unless you know what you're doing. Once it has been created, we want to use the storage option from the left menu:

Then, just follow the 3 steps required to create the project. Go to your Firebase console and create a project and click on add a project: To do this, I've decided to use Firebase, because it's got a great CDN, so the assets (in this case, the icons) will be delivered super fast. Images used in HTML must be hosted somewhere. To change the size, just add the new width value like this: #Hosting the icons I've chosen the new width to be 100px and keep the aspect ratio. The original sizes of the icons are quite big and in this article and as we plan to use them in small sizes, let's reduce its size with Onlinepngtools - resize png. Let's repeat this step of changing colors for all the downloaded icons. Here, I've changed the default black for #f5593d.įeel free to experiment with your own colors there are loads of websites to help you select the best ones. You can upload your !png file and change the color. In order to change it, let's use a super nice online tool: This color might meet your needs, but chances are you want to use a custom color. #Styling the iconsĪll these icons have transparent background and are black.

#CREATE EMAIL SIGNATURE HTML DOWNLOAD#

Then, download mobile, envelope and globe icons. So, it's a matter of searching for them in the page provided and download the PNG format. In this example, I'll just add three social media icons: Twitter, LinkedIn and GitHub. The first thing is to find good free quality icons, and the best place is, because they don't require you to add attributions in your code when using them.

#CREATE EMAIL SIGNATURE HTML HOW TO#

But use this article to get an idea of how to use HTML and CSS and have some fun! #Getting the icons Disclaimer: after trying out the signature for a few months, it looks like its content triggers email spam filters, so your emails could get into the spam folder of your senders, not the nicest thing 😬.

Create email signature html