Half-Elf on Tech

Thoughts From a Professional Lesbian

Tag: genericons

  • ShareDaddy Genericons

    ShareDaddy Genericons

    I have a sneaky feeling that after I publicize this, it may end up as an option in Jetpack. After all, they already include Genericons.

    jetpackI’m using Sharing (from Jetpack) on a couple sites, and it works fairly well (the metrics were surprising that one one site they excel and on others they’re never used). That said, I didn’t like the images loaded for ShareDaddy, and it was a real Golidlocks moment. The ‘icon’ buttons were buttons within buttons, and with or without the text, that didn’t make me smile. The official buttons were too large and not matchy enough since everyone has their own design.

    sharing-buttons1

    So what’s a girl to to but fall back on her favorite toy in all the world, Genericons!

    There are only three steps, and the third is to have a drink. You ready?

    Change Sharing Links to “Text Only”

    It’s easier to do this via text only, though I’m sure you can do it with the others. I switched to Text. One click. Done.

    Edit your CSS

    Now I want to hide the text, put a Genericon before the link, and set the colors to ‘true’ for each item (that is, use Twitter Blue for Twitter, Facebook Blue for Facebook, Google Orange for Google+ etc). I picked silvery-grey for email. Also I think it’s correct to use display:none to hide the text, since screenreaders will still read it, and that’s okay. Could be wrong. CSS is not my super-power.

    div.sharedaddy a.sd-button {
    padding: 2px!important;
}

div.sharedaddy .sd-content li a::before {
    font-family: 'Genericons';
	font-size: 16px;
	color: #fff;
}

div.sharedaddy a.sd-button>span {
    display: none;
}

div.sharedaddy .sd-content li.share-twitter a::before {
    content: '\f202';
    color: #4099FF;
}
div.sharedaddy .sd-content li.share-facebook a::before {
    content: '\f204';
    color: #3B5998;
}
div.sharedaddy .sd-content li.share-google-plus-1 a::before {
    content: '\f218';
    color: #DD4B39;
}
div.sharedaddy .sd-content li.share-tumblr a::before {
    content: '\f214';
    color: #2C4762;
}
div.sharedaddy .sd-content li.share-email a::before {
    content: '\f410';
    color: #666666;
}

    This isn’t perfect, since there’s no Genericon for Printing, Digg, Reddit, StumbleUpon, or Pocket at this time. I’ll be suggesting it to Joen soon. Interestingly, Font Awesome (which could also be used for this) doesn’t have Reddit or the other social networks either, but it does have a print icon. Me? I don’t need them for this site, so it’s okay.

    myshare

    Looks great, scales well on high-def devices, and it pleases me. By the way Pinterest’s red is #C92228 from what I can tell.

    Have a drink

    Like I said, step three to was to have a drink. You’re done!

  • Genericon’d Menus

    Genericon’d Menus

    Screen Shot 2013-03-31 at 31 Mar - 1.35.26 AMQuick and dirty, I wanted a menu to have Genericons. Menus are crazy extendible and I use them in sidebars all the time to make a list of links formatted in a nice way. So why not a Genericon? After all, I know menus are really glorified Custom Post Types.

    Don’t they look pretty? It’s stupid easy.

    Screen Shot 2013-03-31 at 31 Mar - 1.38.34 AM

    URL: http://facebook.com/you
    Navigation Label:
    Title Attribute: Facebook
    CSS Classes (optional): social-buttons

    Then all I had to do is fiddle with CSS. li.social-buttons .genericons is applicable here, and that’s why I gave it the CSS class. If I wanted to have it be a genericon plus text, then the Navigation Label would have been Facebook instead. If you don’t want the genericon to be part of the link, make the label just the link name, and add genericon genericon-facebook to the CSS classes.

  • Genericons: Plugin’d

    Genericons: Plugin’d

    banner-772x250 The thing about all this is that I really like Font Awesome. The licensing drives me to drink. The WordPress Repository has an extra rule, saying everything there has to be GPLV2 or later, for reasons that aren’t the point. What is the point is that the moment Genericons came out, I knew that it should be a plugin, because a totally GPL-compatible version of a font like this was what people wanted.

    Since I also knew Rachel Baker had made a killer Font Awesome Plugin (and yes, that’s the one I use), I quickly stripmined its code and made Genericon’d.(At this point it’s pretty much a re-write, but I always credit where I started!)

    ZabooThe name is not Genericons because it’s not official, and they may want that name later. With that in mind, I thought “Well I totally Genericon’d them all!” because sometimes I talk like Zaboo from “The Guild.” I think of him as the Patron Avatar of this Plugin (though he’d probably ask why there wasn’t a Genericon for his staff, or Codex’s).

    So what are these ‘font icons’ things anyway and how do they work?

    Normally if you want to insert a Twitter image, let’s say, you would have to go find the image, download it, edit it to the right size, upload, embed. On the other hand, with a font you can do this: That will look like this: Isn’t that cool? All you have to do is include the font and the CSS in your site and you’re good to go. All those files are smaller than most images, load faster, and best of all, they scale better.

    [genericon icon=twitter size=4x] Same font, bigger size. Isn’t that cool? Since they’re pure CSS, you can do whatever you want, from changing colors and size to inserting into menus, like I did on another site. When you add in their relatively small file size and scalability, you gain and added level of awesome because your little icons always look amazing on retina displays too! After all, they’re just fonts.

    The alternative to something like this would be to use sprites, which is actually what WordPress uses today on your dashboard, and they look like this:
    WordPress's Menu

    If you go look at your WordPress dashboard, you’ll notice that hovering over these images makes them change between the dull grey and the cool colorized version. In order to do that, you have two images. Not so with Genericons! .genericon-twitter:hover {background-color:pink;color:purple;} would do the same thing (in pretty garish colors…). Just as an example of how it works, here’s a link with a Genericon in it: [genericon icon=twitter] @ipstenu. It’s actually kind of nice how it automatically adapts to the CSS I have in place for hovering over links.

    Basically the reasons to use icon fonts instead of images are that you can style them with CSS, they look good on all displays at any resolution, they easily adapt to fit your site when you change themes and colors, there’s only one HTTP call for the icons, and they’re open source.

    Here are some features in Genericon’d (as of version 1.2) that I think are kinda awesome:

    On the fly color changing.

    You can make a Twitter Blue icon: [genericon icon=twitter color=#4099FF] makes [genericon icon=twitter color=#4099FF]

    On the fly resize.

    You can make a Facebook icon bigger: [genericon icon=facebook size=4x] makes [genericon icon=facebook size=4x]

    And it all pretty much works the way I want it to. I did tweak the CSS a little to use em instead of px, which isn’t perfect. Genericons works best when your font is a derivative of 16, and for some reason, people still default to 12px. Protip: Ask someone with imperfect vision to look at your site. If they squint, your font is too small.

    Genericons, and any font-icon add-on, aren’t perfect for everyone or every site, but they’re here if you need ’em.