Mobile app version of vmapp.org
Login or Join
Bethany839

: Font Awesome as Photoshop Custom Shape Set 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

@Bethany839

Posted in: #AdobePhotoshop #Fonts #PhotoshopScripting

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?

10.05% popularity Vote Up Vote Down


Login to follow query

More posts by @Bethany839

5 Comments

Sorted by latest first Latest Oldest Best

 

@Turnbaugh909

Here is a Photoshop Extension for using Font-Awesome as shapes in your designs
creativedo.co/FontAwesomePS

10% popularity Vote Up Vote Down


 

@Phylliss782

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

10% popularity Vote Up Vote Down


 

@Cugini998

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 );
}

10% popularity Vote Up Vote Down


 

@Welton168

You Can use Flaticon photoshop plugin. Which gives access to the shapes of all icon fonts around the web.
www.flaticon.com/download-plugin
Hope this helps....

10% popularity Vote Up Vote Down


 

@Welton168

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.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme