CSS Ninja Techniques – Download Links Icon In Pure CSS

    Use advance CSS rules to give your users a little more information about links, that has the download attribute, this is similar to a previous article I’ve wrote, on how mark page’s external-links, similar to how its done in Wikipedia’s pages, using CSS3’s ::after pseudo-element.


    first thing is downloading nice “download icon”,
    I’ve used the second download icon from the Font-Awesome package,

    here is just the png from the package above

    edit it (I’ve used Paint.Net), remove the white background, resize it to about 12px/12px, make it transparent so the background-colors of the page will blend with the image, making it less sharp and more “theme suitable”.. I’ve tuned it down to about 180 of 255 transparency (255 is the “100%”).

    and here is the just the modified image

    convert it to base64 and add the mime-type prefix,
    following with inserting it to your main style css file, using the following rule:

      content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAMCAYAAAC5tzfZAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTFH80I3AAAA6ElEQVQoU7VSwQqCQBBVcNVNXRVJQUEPCvoLRR/SB0T9QNfIEDp1da4e/NHeWsRS1q0Hj5mdN4/ZcdXeURTFQgjRuq5Lvu93VVU5T+k76roWnPMbUrIs65bnuXgoP/B/UxzHazT1pmmSruuE0hTlWdajKNo8OhWkacohHpBOBpWMsUMYhhz5J5qmYbZt75D2oDT0MOyyLGNS/4rnxD1SadjPTsDSHcLrKjifyrJM8UYrcIm9jqruOM5Vk4uqRUnUWjzw1jCM04xGsyaVmEzDMBC+Ho3jOEXN87yz/GV+MUkSQt8UgyC43AH4oj71EqujyQAAAABJRU5ErkJggg==") center right no-repeat;
      margin: 0 6px 0 0;

    a good practice will be to limit the effect of the CSS-rule to a specific part of the page,
    for example, for my WordPress, I’ve set the selector to:

    .content .posts a[download]:before{

    so only the to the content at the main container will be effected..