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?
Add a comment
|
5 Answers
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? Feb 12, 2014 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.– joojaaFeb 13, 2014 at 10:37
-
-
I converted this into a .csh file, if you want you can download it from here: dl.dropboxusercontent.com/u/8060862/fontawesome.csh Feb 13, 2014 at 15:24
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....
Here is a Photoshop Extension for using Font-Awesome as shapes in your designs
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. Feb 12, 2014 at 10:17
If helps, here you have all the Font Awesome icons made in vector shapes for Photoshop: FontAwesome vector icon shapes
