Genericons unicode values

Genericons unicode values

Created:21 Dec 2016 11:07:56 , in  Host development,  Web development

Genericons is a set of vector icons embedded in a webfont. They look crisp, scale well and are easy to use. Moreover they are also free to use for whatever project you may need them.

If you've dealt with a standard WordPress theme like twentyfifteen you probably noticed, those themes, and not only them, rely upon genericons for social icons. Their developers embeded the icons in a particular way, namely, not in some HTML file but in style.css.

A typical chunk of CSS code that uses a genericon looks like below:


.social-navigation a[href*="dropbox.com"]:before {
        font-family:"Genericons";
	content: "\f225";
}

The interesting bit in the piece of code above is \f225. It a specific unicode codepoint used to display Dropbox icon.

The codepoints like the one mentioned here are kept in genericons/geneircons.css file under your themes directory. In case you looked and could not find them. At the bottom of this article there is a list of all unicode icons, their names and their codepoints.

If that's all you need to know, you can, jump straight to the list. Further part of this article presents a small BASH script that I use to extract names and codepoints from genericons.css file. It is a part of larger suite of programs that builds new versions of genericons, and creates up-to-date lists of their codepoints.

Extracting genericons names and codepoints

The script below extracts \fxxx values together with icon names from genericons.css if invoked with no extra arguments. If given a name of genericon like "dropbox" for example, it will return the code for it.


#!/usr/bin/env bash

############################################################
# Author : Sylwester Wojnowski
# Title : Genericons unicode values  
# Description : Script finds \fxxx value for a given icon name
#               or returns all name:\fxxx pairs found in 
#               genericons.css file given as input to it.
# Version : 1.0.0 
# ###########################################################

script=$(basename "${0}")
item=""

if [[ -z "$1" ]] || [[ ! -f "$1" ]] || [[ $(grep -q "genericons.css" "$1") ]]
  then
  echo "$1 is not a correct genericons.css file"
  echo "USAGE: $script path-to-genericons.css [icon_name]"
  exit 1;
fi

if [[ "$2" != "" ]];then item="$2"; fi

while read -r ; do
    name="${REPLY/.genericon-/}";
    name="${name/:*/}";
    IFS='"' read -ra CDR <<< "$REPLY"
    code="${CDR[1]}"
    if [[ "$item" != "" ]];then
      if [[ "$name" = "$2" ]];then
        echo "$name:$code";
        exit 0;
      fi  
    else
      echo "$name:$code";
    fi
done < <(grep 'content' "$1" ) 
 

Script usage

Assuming, the script is saved to gensCodes.sh and made executable (chmod 755 gensCodes.sh),basic usage through the console is simple:


$ ./gensCodes.sh path-to-your-genericons.css 

will display all the available genericons names and their respective unicode codepoints separated by the colon symbol.

The script used with an icon name as the second parameter returns just one line, which will consist of the icon's name and a unicode codepoint separated by the colon symbol.


$ ./gensCodes.sh path-to-your-genericons.css icon

Streamlining with aliases

To streamline the whole thing even more you can make an alias in your ~/.bashrc file:


gensCodes=path-to-gensCodes.sh path-to-your-genericons.css

Then,


$ cd ~

and


$ source ~/.bashrc

Now to look up a codepoint for "dropbox" you just enter


$ gensCodes dropbox

Obtaining all the available codes can be done by typing in terminal console:


$ gensCodes

I hope you see the point of the script for dealing with genericons.css now.

Genericons unicode codes list

Eech item on the Genericons list below contains an icon, its name and unicode codepoint.

Codepoints in your css files are used like in example described at the beginning of this post.

  • activity\f508
  • anchor\f509
  • aside\f101
  • attachment\f416
  • audio\f109
  • bold\f471
  • book\f444
  • bug\f50a
  • cart\f447
  • category\f301
  • chat\f108
  • checkmark\f418
  • close\f405
  • close-alt\f406
  • cloud\f426
  • cloud-download\f440
  • cloud-upload\f441
  • code\f462
  • codepen\f216
  • cog\f445
  • collapse\f432
  • comment\f300
  • day\f305
  • digg\f221
  • document\f443
  • dot\f428
  • downarrow\f502
  • download\f50b
  • draggable\f436
  • dribbble\f201
  • dropbox\f225
  • dropdown\f433
  • dropdown-left\f434
  • edit\f411
  • ellipsis\f476
  • expand\f431
  • external\f442
  • \f203
  • \f204
  • fastforward\f458
  • feed\f413
  • flag\f468
  • flickr\f211
  • foursquare\f226
  • fullscreen\f474
  • gallery\f103
  • github\f200
  • googleplus\f206
  • googleplus-alt\f218
  • handset\f50c
  • heart\f461
  • help\f457
  • hide\f404
  • hierarchy\f505
  • home\f409
  • image\f102
  • info\f455
  • instagram\f215
  • italic\f472
  • key\f427
  • leftarrow\f503
  • link\f107
  • linkedin\f207
  • linkedin-alt\f208
  • location\f417
  • lock\f470
  • mail\f410
  • maximize\f422
  • menu\f419
  • microphone\f50d
  • minimize\f421
  • minus\f50e
  • month\f307
  • move\f50f
  • next\f429
  • notice\f456
  • paintbrush\f506
  • path\f219
  • pause\f448
  • phone\f437
  • picture\f473
  • pinned\f308
  • pinterest\f209
  • pinterest-alt\f210
  • play\f452
  • plugin\f439
  • plus\f510
  • pocket\f224
  • polldaddy\f217
  • portfolio\f460
  • previous\f430
  • print\f469
  • quote\f106
  • rating-empty\f511
  • rating-full\f512
  • rating-half\f513
  • reddit\f222
  • refresh\f420
  • reply\f412
  • reply-alt\f466
  • reply-single\f467
  • rewind\f459
  • rightarrow\f501
  • search\f400
  • send-to-phone\f438
  • send-to-tablet\f454
  • \f415
  • show\f403
  • shuffle\f514
  • sitemap\f507
  • skip-ahead\f451
  • skip-back\f450
  • skype\f220
  • spam\f424
  • spotify\f515
  • standard\f100
  • star\f408
  • status\f105
  • stop\f449
  • stumbleupon\f223
  • \f463
  • subscribed\f465
  • summary\f425
  • tablet\f453
  • tag\f302
  • time\f303
  • top\f435
  • trash\f407
  • tumblr\f214
  • twitch\f516
  • \f202
  • unapprove\f446
  • unsubscribe\f464
  • unzoom\f401
  • uparrow\f500
  • user\f304
  • video\f104
  • videocamera\f517
  • vimeo\f212
  • warning\f414
  • website\f475
  • week\f306
  • wordpress\f205
  • xpost\f504
  • youtube\f213
  • zoom\f402

This post was updated on 29 Apr 2017 17:07:09

Tags:  genericons ,  php ,  wordpress