using carrd icons in non-carrd sites!

[Bailey / Jay]

Hello hello! I've been working on something that I want to share!

Most people who make websites are probably familiar with fontawesome, but before I knew it existed, I copy/pasted the inline SVG from a carrd and styled it to my liking. A bit convoluted and a bit clunky, but it worked, looked good, had brand icons that fontawesome didn't, and made me feel smart. I like the icons, and generally, I think they look good even when used in regular sites!



As mentioned, though, it was a bit convoluted and clunky to set up. I wanted to find a solution that would make the process easier to use, and I think I have!

Said solution can be found at carrd-icons.netlify.app, and while I would recommend taking a look since it has a list of the current icons I have set up, I'll explain how to use said solution here as well!

First, take a look at this, though again, an easier-to-look-at icons list is in the first link. If it has the icons you're looking for, most of the current ones being brand icons, then download it and add it into the main folder of your website!

Next, add this between the header tags of the page(s) you'll be needing icons on.

Code

<script src="https://code.jquery.com/jquery-1.10.2.js"></script><div id="icon-holder"></div>

Then, put this at the end of the page(s) you're putting icons on. It should be the last thing before the closing body tag.

Code

<script>
    $(function(){
    $("#icon-holder").load("/icons.htm");
  });
</script>

After that, you stick this in your CSS stylesheet, or in the style tags on the page(s) you're putting icons on, whichever you prefer! Tweak as needed, but only AFTER putting the icons in :'D

Code

svg{
    width: 1.5rem;
    margin: -67px 0px -69px;
    fill:white;
}

And that's pretty much the whole setup! then, wherever you need icons, put this, switching out "name" for the name of whatever icon you're using. Again, the icons list in the site I made is much better, since it has every icon currently set up with this code snippet copy/paste-able.

Code

<svg><use xlink:href="#icon-name"></use></svg>

Sooooo yeah! I wanted to share this, since I've been working on it for a bit, and I'm pretty happy with it! I wanna find a way to make it work with a link so you don't have to download anything, but even in its current state, it gets the job done. It works well as far as I've tested, but if anyone has suggestions (either for specific carrd icons or for how to improve it), please let me know! I hope this can be helpful to somebody :D