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! Yes, this is the same link from earlier, but it's got a list of all the icons! If it has the icons you're looking for, most of the current ones being brand icons, then you can continue!

Next, add this between the head tags of the page(s) you'll be needing icons on. If you want to download it instead, you can do that, too!

Code

<script id="allIcons" src="https://carrd-icons.netlify.app/icons.js"></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.carrdicons{
    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. The icons list is currently set up with this code snippet copy/paste-able.

Code

<svg class="carrdicons"><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! 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

[sen.fish]

The icons look great, but using jquery, and a version from over 10 years ago, might not be the best way of going about doing this. 😅 My understanding at least is that jquery used to be very useful for browser cross-compatibility, but nowadays with improvements in how browsers work it's not really worth the cost of loading a 266kb library.

[Bailey / Jay]

The icons look great, but using jquery, and a version from over 10 years ago, might not be the best way of going about doing this. 😅 My understanding at least is that jquery used to be very useful for browser cross-compatibility, but nowadays with improvements in how browsers work it's not really worth the cost of loading a 266kb library.

Yeah, you're absolutely right on that 😭 I was using that version of jquery because I grabbed it off of some old stackoverflow question I found a couple years ago, and didn't know any better ways to do it 💀 but!! since posting this, I figured out how to do it more efficiently but I forgot to make some kind of update here :') ty though! /gen