8

Everytime I need to use font awesome in photoshop, I'll always copy an icon from website and paste in photoshop. I can print it into pdf and copy into illustrator as vector but I want them as photoshop custom shape set. I've copied whole text into photoshop but then I need to split layers to each icon in each layer and this will take a long time. How can I convert them all into .csh file?

9

This could be a good time to introduce scripting and the script listener to your tool set. While a plugin is fine you might have some other ideas later where this might help. So here is my quickly clobbered together script. To use this change the setup part and put this in a jsx file (and then drag an drop on Photoshop for instance):

// setup preferences
SIZE = UnitValue(24, "pt");
FONT = "Cambria";
CHARS_TO_CONVERT = "ABCDEFGHIJ"

doc = app.activeDocument;
for ( var i = 0; i < CHARS_TO_CONVERT.length; i++ ){
    var ch = CHARS_TO_CONVERT.charAt(i)
    var layer = doc.artLayers.add();
    layer.kind = LayerKind.TEXT;
    layer.textItem.contents = ch;
    layer.textItem.font = FONT;
    layer.textItem.size = SIZE;
    layer.textItem.convertToShape();
    makeCustomShape(ch);
    layer.clear();
}

function makeCustomShape(name){
// recorded with script listener will make currently active path a custiom shape 
// with a specified name
    var idMk = charIDToTypeID( "Mk  " );
        var desc29 = new ActionDescriptor();
        var idnull = charIDToTypeID( "null" );
            var ref13 = new ActionReference();
            var idcustomShape = stringIDToTypeID( "customShape" );
            ref13.putClass( idcustomShape );
        desc29.putReference( idnull, ref13 );
        var idUsng = charIDToTypeID( "Usng" );
            var ref14 = new ActionReference();
            var idPrpr = charIDToTypeID( "Prpr" );
            var idfsel = charIDToTypeID( "fsel" );
            ref14.putProperty( idPrpr, idfsel );
            var idDcmn = charIDToTypeID( "Dcmn" );
            var idOrdn = charIDToTypeID( "Ordn" );
            var idTrgt = charIDToTypeID( "Trgt" );
            ref14.putEnumerated( idDcmn, idOrdn, idTrgt );
        desc29.putReference( idUsng, ref14 );
        var idNm = charIDToTypeID( "Nm  " );
        desc29.putString( idNm, name );
    executeAction( idMk, desc29, DialogModes.NO );
}

Its faster than doing things manually.

And heres one for the specific usecase:

// setup preferences
SIZE = UnitValue(24, "pt");
FONT = "FontAwesome";
arr = [
"glass \uf000",
"music \uf001",
"search \uf002",
"envelope-o \uf003",
"heart \uf004",
"star \uf005",
"star-o \uf006",
"user \uf007",
"film \uf008",
"th-large \uf009",
"th \uf00a",
"th-list \uf00b",
"check \uf00c",
"times \uf00d",
"search-plus \uf00e",
"search-minus \uf010",
"power-off \uf011",
"signal \uf012",
"cog \uf013",
"trash-o \uf014",
"home \uf015",
"file-o \uf016",
"clock-o \uf017",
"road \uf018",
"download \uf019",
"arrow-circle-o-down \uf01a",
"arrow-circle-o-up \uf01b",
"inbox \uf01c",
"play-circle-o \uf01d",
"repeat \uf01e",
"refresh \uf021",
"list-alt \uf022",
"lock \uf023",
"flag \uf024",
"headphones \uf025",
"volume-off \uf026",
"volume-down \uf027",
"volume-up \uf028",
"qrcode \uf029",
"barcode \uf02a",
"tag \uf02b",
"tags \uf02c",
"book \uf02d",
"bookmark \uf02e",
"print \uf02f",
"camera \uf030",
"font \uf031",
"bold \uf032",
"italic \uf033",
"text-height \uf034",
"text-width \uf035",
"align-left \uf036",
"align-center \uf037",
"align-right \uf038",
"align-justify \uf039",
"list \uf03a",
"outdent \uf03b",
"indent \uf03c",
"video-camera \uf03d",
"picture-o \uf03e",
"pencil \uf040",
"map-marker \uf041",
"adjust \uf042",
"tint \uf043",
"pencil-square-o \uf044",
"share-square-o \uf045",
"check-square-o \uf046",
"arrows \uf047",
"step-backward \uf048",
"fast-backward \uf049",
"backward \uf04a",
"play \uf04b",
"pause \uf04c",
"stop \uf04d",
"forward \uf04e",
"fast-forward \uf050",
"step-forward \uf051",
"eject \uf052",
"chevron-left \uf053",
"chevron-right \uf054",
"plus-circle \uf055",
"minus-circle \uf056",
"times-circle \uf057",
"check-circle \uf058",
"question-circle \uf059",
"info-circle \uf05a",
"crosshairs \uf05b",
"times-circle-o \uf05c",
"check-circle-o \uf05d",
"ban \uf05e",
"arrow-left \uf060",
"arrow-right \uf061",
"arrow-up \uf062",
"arrow-down \uf063",
"share \uf064",
"expand \uf065",
"compress \uf066",
"plus \uf067",
"minus \uf068",
"asterisk \uf069",
"exclamation-circle \uf06a",
"gift \uf06b",
"leaf \uf06c",
"fire \uf06d",
"eye \uf06e",
"eye-slash \uf070",
"exclamation-triangle \uf071",
"plane \uf072",
"calendar \uf073",
"random \uf074",
"comment \uf075",
"magnet \uf076",
"chevron-up \uf077",
"chevron-down \uf078",
"retweet \uf079",
"shopping-cart \uf07a",
"folder \uf07b",
"folder-open \uf07c",
"arrows-v \uf07d",
"arrows-h \uf07e",
"bar-chart-o \uf080",
"twitter-square \uf081",
"facebook-square \uf082",
"camera-retro \uf083",
"key \uf084",
"cogs \uf085",
"comments \uf086",
"thumbs-o-up \uf087",
"thumbs-o-down \uf088",
"star-half \uf089",
"heart-o \uf08a",
"sign-out \uf08b",
"linkedin-square \uf08c",
"thumb-tack \uf08d",
"external-link \uf08e",
"sign-in \uf090",
"trophy \uf091",
"github-square \uf092",
"upload \uf093",
"lemon-o \uf094",
"phone \uf095",
"square-o \uf096",
"bookmark-o \uf097",
"phone-square \uf098",
"twitter \uf099",
"facebook \uf09a",
"github \uf09b",
"unlock \uf09c",
"credit-card \uf09d",
"rss \uf09e",
"hdd-o \uf0a0",
"bullhorn \uf0a1",
"bell \uf0f3",
"certificate \uf0a3",
"hand-o-right \uf0a4",
"hand-o-left \uf0a5",
"hand-o-up \uf0a6",
"hand-o-down \uf0a7",
"arrow-circle-left \uf0a8",
"arrow-circle-right \uf0a9",
"arrow-circle-up \uf0aa",
"arrow-circle-down \uf0ab",
"globe \uf0ac",
"wrench \uf0ad",
"tasks \uf0ae",
"filter \uf0b0",
"briefcase \uf0b1",
"arrows-alt \uf0b2",
"users \uf0c0",
"link \uf0c1",
"cloud \uf0c2",
"flask \uf0c3",
"scissors \uf0c4",
"files-o \uf0c5",
"paperclip \uf0c6",
"floppy-o \uf0c7",
"square \uf0c8",
"bars \uf0c9",
"list-ul \uf0ca",
"list-ol \uf0cb",
"strikethrough \uf0cc",
"underline \uf0cd",
"table \uf0ce",
"magic \uf0d0",
"truck \uf0d1",
"pinterest \uf0d2",
"pinterest-square \uf0d3",
"google-plus-square \uf0d4",
"google-plus \uf0d5",
"money \uf0d6",
"caret-down \uf0d7",
"caret-up \uf0d8",
"caret-left \uf0d9",
"caret-right \uf0da",
"columns \uf0db",
"sort \uf0dc",
"sort-asc \uf0dd",
"sort-desc \uf0de",
"envelope \uf0e0",
"linkedin \uf0e1",
"undo \uf0e2",
"gavel \uf0e3",
"tachometer \uf0e4",
"comment-o \uf0e5",
"comments-o \uf0e6",
"bolt \uf0e7",
"sitemap \uf0e8",
"umbrella \uf0e9",
"clipboard \uf0ea",
"lightbulb-o \uf0eb",
"exchange \uf0ec",
"cloud-download \uf0ed",
"cloud-upload \uf0ee",
"user-md \uf0f0",
"stethoscope \uf0f1",
"suitcase \uf0f2",
"bell-o \uf0a2",
"coffee \uf0f4",
"cutlery \uf0f5",
"file-text-o \uf0f6",
"building-o \uf0f7",
"hospital-o \uf0f8",
"ambulance \uf0f9",
"medkit \uf0fa",
"fighter-jet \uf0fb",
"beer \uf0fc",
"h-square \uf0fd",
"plus-square \uf0fe",
"angle-double-left \uf100",
"angle-double-right \uf101",
"angle-double-up \uf102",
"angle-double-down \uf103",
"angle-left \uf104",
"angle-right \uf105",
"angle-up \uf106",
"angle-down \uf107",
"desktop \uf108",
"laptop \uf109",
"tablet \uf10a",
"mobile \uf10b",
"circle-o \uf10c",
"quote-left \uf10d",
"quote-right \uf10e",
"spinner \uf110",
"circle \uf111",
"reply \uf112",
"github-alt \uf113",
"folder-o \uf114",
"folder-open-o \uf115",
"smile-o \uf118",
"frown-o \uf119",
"meh-o \uf11a",
"gamepad \uf11b",
"keyboard-o \uf11c",
"flag-o \uf11d",
"flag-checkered \uf11e",
"terminal \uf120",
"code \uf121",
"reply-all \uf122",
"mail-reply-all \uf122",
"star-half-o \uf123",
"location-arrow \uf124",
"crop \uf125",
"code-fork \uf126",
"chain-broken \uf127",
"question \uf128",
"info \uf129",
"exclamation \uf12a",
"superscript \uf12b",
"subscript \uf12c",
"eraser \uf12d",
"puzzle-piece \uf12e",
"microphone \uf130",
"microphone-slash \uf131",
"shield \uf132",
"calendar-o \uf133",
"fire-extinguisher \uf134",
"rocket \uf135",
"maxcdn \uf136",
"chevron-circle-left \uf137",
"chevron-circle-right \uf138",
"chevron-circle-up \uf139",
"chevron-circle-down \uf13a",
"html5 \uf13b",
"css3 \uf13c",
"anchor \uf13d",
"unlock-alt \uf13e",
"bullseye \uf140",
"ellipsis-h \uf141",
"ellipsis-v \uf142",
"rss-square \uf143",
"play-circle \uf144",
"ticket \uf145",
"minus-square \uf146",
"minus-square-o \uf147",
"level-up \uf148",
"level-down \uf149",
"check-square \uf14a",
"pencil-square \uf14b",
"external-link-square \uf14c",
"share-square \uf14d",
"compass \uf14e",
"caret-square-o-down \uf150",
"caret-square-o-up \uf151",
"caret-square-o-right \uf152",
"eur \uf153",
"gbp \uf154",
"usd \uf155",
"inr \uf156",
"jpy \uf157",
"rub \uf158",
"krw \uf159",
"btc \uf15a",
"file \uf15b",
"file-text \uf15c",
"sort-alpha-asc \uf15d",
"sort-alpha-desc \uf15e",
"sort-amount-asc \uf160",
"sort-amount-desc \uf161",
"sort-numeric-asc \uf162",
"sort-numeric-desc \uf163",
"thumbs-up \uf164",
"thumbs-down \uf165",
"youtube-square \uf166",
"youtube \uf167",
"xing \uf168",
"xing-square \uf169",
"youtube-play \uf16a",
"dropbox \uf16b",
"stack-overflow \uf16c",
"instagram \uf16d",
"flickr \uf16e",
"adn \uf170",
"bitbucket \uf171",
"bitbucket-square \uf172",
"tumblr \uf173",
"tumblr-square \uf174",
"long-arrow-down \uf175",
"long-arrow-up \uf176",
"long-arrow-left \uf177",
"long-arrow-right \uf178",
"apple \uf179",
"windows \uf17a",
"android \uf17b",
"linux \uf17c",
"dribbble \uf17d",
"skype \uf17e",
"foursquare \uf180",
"trello \uf181",
"female \uf182",
"male \uf183",
"gittip \uf184",
"sun-o \uf185",
"moon-o \uf186",
"archive \uf187",
"bug \uf188",
"vk \uf189",
"weibo \uf18a",
"renren \uf18b",
"pagelines \uf18c",
"stack-exchange \uf18d",
"arrow-circle-o-right \uf18e",
"arrow-circle-o-left \uf190",
"caret-square-o-left \uf191",
"dot-circle-o \uf192",
"wheelchair \uf193",
"vimeo-square \uf194",
"try \uf195",
"plus-square-o \uf196"
]

doc = app.activeDocument;
for ( var i = 0; i < arr.length; i++ ){
    var data = arr[i].split(" ")
    var layer = doc.artLayers.add();
    layer.kind = LayerKind.TEXT;
    layer.textItem.contents = data[1];
    layer.textItem.font = FONT;
    layer.textItem.size = SIZE;
    layer.textItem.convertToShape();
    makeCustomShape(data[0]);
    layer.clear();
}

function makeCustomShape(name){
// recorded with script listener will make currently active path a custiom shape 
// with a specified name
    var idMk = charIDToTypeID( "Mk  " );
        var desc29 = new ActionDescriptor();
        var idnull = charIDToTypeID( "null" );
            var ref13 = new ActionReference();
            var idcustomShape = stringIDToTypeID( "customShape" );
            ref13.putClass( idcustomShape );
        desc29.putReference( idnull, ref13 );
        var idUsng = charIDToTypeID( "Usng" );
            var ref14 = new ActionReference();
            var idPrpr = charIDToTypeID( "Prpr" );
            var idfsel = charIDToTypeID( "fsel" );
            ref14.putProperty( idPrpr, idfsel );
            var idDcmn = charIDToTypeID( "Dcmn" );
            var idOrdn = charIDToTypeID( "Ordn" );
            var idTrgt = charIDToTypeID( "Trgt" );
            ref14.putEnumerated( idDcmn, idOrdn, idTrgt );
        desc29.putReference( idUsng, ref14 );
        var idNm = charIDToTypeID( "Nm  " );
        desc29.putString( idNm, name );
    executeAction( idMk, desc29, DialogModes.NO );
}
  • This is almost what I've looking for! But FontAwesome using unique characters for each icon, not letters such as "A,B...". How can i write it in this script? – Ferdi Çıldız Feb 12 '14 at 22:03
  • 1
    @FerdiÇıldız I added a modified script that does all the dirty work (because it was easy, unicode chars can be made with \uCODE). Scalped the names and codes form the cheat sheet (so the library is nice and tidy). Takes a while to process so take a break remember to save once your done. Buy somebody some free beer will ya. – joojaa Feb 13 '14 at 10:37
  • Awesome! This is work perfectly! Thanks joojaa! – Ferdi Çıldız Feb 13 '14 at 11:57
  • I converted this into a .csh file, if you want you can download it from here: dl.dropboxusercontent.com/u/8060862/fontawesome.csh – Ferdi Çıldız Feb 13 '14 at 15:24
4

You Can use Flaticon photoshop plugin. Which gives access to the shapes of all icon fonts around the web.

http://www.flaticon.com/download-plugin

Hope this helps....

2

Here is a Photoshop Extension for using Font-Awesome as shapes in your designs

http://creativedo.co/FontAwesomePS

1

Other than installing the Font Awesome desktop font, and using the Font Awesome Cheatsheet (http://fortawesome.github.io/Font-Awesome/cheatsheet/), there is no conventional working method of directly converting it to a .csh file.

The most you can do is manually convert the icons using the Layer -> Type -> Convert to Shape method.

  • I know this method but there is a lot of icons, it will take very long time. – Ferdi Çıldız Feb 12 '14 at 10:17
1

If helps, here you have all the Font Awesome icons made in vector shapes for Photoshop: FontAwesome vector icon shapes

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.