You can upload this file I made into https://icomoon.io/ to generate a font of all the icons to date. I try to keep it up to date as new encounter sets come out. https://github.com/zzorba/ArkhamCards/blob/master/assets/icomoon/project.json

Juurisyy tälle ikonien "väärinkäytölle" on ns. ikonifontit, jotka usein sisällyttää pakettiiin yleisimpien palvelujen kuvakkeet. kick.fi näyttää käyttävän icomoon:ia.

Ikävä kyllä en ole itse yhtään sen parempi, sillä olen käyttänyt saman ikonipaketin stackoverflow-ikonia kuvaamaan ylibookattua tilausta asiakkaan järjestelmässä.

You can export as SVG, then use the icomoon app to manually bundle them, then download that bundle. I made an open source panel specifically for this with screencasts of batches, but it's still in dev context and not available in a production build like .zxp. You can use it if you place this repo inside of .../appData/Roaming/Adobe/CEP/extensions.

A few caveats of icomoon -- can't have strokes, all appearances must be expanded. The panel above skips that by duplicating and expanding, hiding the original and saving the duplicate then deleting the dupe. You also need to understand how to import a font through CSS with @font-face, though they do all this for you it won't be much help if you don't understand how to use it. Also results are best when you add a manual viewBox, like an empty rectangle to keep proportions, and when you export isolated glyphs. Can't have multi-color and compound paths (depending on complexity) sometimes will not work, otherwise it's easy and free.

This is not about Kustom but in general around TTF icon packs, the glyphs you want are some specific chars in the font so you have 2 options:

• Use a tool like icomoon, upload your font and then map the icons you want to some readable char (like "a", "b"), please note that the font will be visible only in the preview area of kustom not in the editor
• Understand the UTF code of the char you want to use and then use in Kustom $tc(utf, 123)$ where "123" is the UTF code of the char

Don't use libs like bootstrap and jquery. You're trying to learn, not save time.
Don't use id's for styling - use classes.
The second background image is a bit blurry on big screens - use one with a higher resolution.
The social icons don't look like the official icons and are different sizes. Also they are images. Use svg's or fonts for icons. Check this out - https://icomoon.io/app/
Order styling in order of importance

#contactMe { color: #9c9c9e; background-color: #2a2c2d; text-align: center; height: 300px; }

#contactMe { height: 300px; text-align: center; background-color: #2a2c2d; color: #9c9c9e;
}

Try and make the navbar switch it's active element as the user scrolls.

Other than that - good job. Much better than my first portfolio page.

The template icons exist within a TrueType Font embedded within the Xochitl binary. The posted development version of RCU has code to extract this font and generate thumbnail images used during template selection. Reading that code may aide your understanding.

In order to change these icons, you will need to change the TTF payload inside Xochitl, which will require disassembly, editing the TTF with your new icons (it is based on IcoMoon), and reassembly of the binary.

The iconCode refers to the Unicode value stored in the font. For additional information, see here.

https://icomoon.io/app/#/select
you can mix 'n match glyphs from different fonts if you're not satisfied with the glyphs of one font
but most importantly - which is what I use the site for - you can upload SVGs of an icon theme and have it packaged into a neat font. You'll have to make all the SVGs a single colour to be able to properly use them for lemonbar/polybar tho

Instead of FA Pro, I ended up going with icomoon's subscription service instead. Much more versatile being that you can create your own icon groups and even include your own custom icons with the icon-font groups. Also includes a ton of icon packs in the service, including a customizable version of FA. If you only need 10 icons out of the entire pack, then you can create a kit with just those 10 icons. Much smaller file sizes!

https://icomoon.io/

Works fine with Bootstrap or any other framework. Implementation is very similar to FA.

Icomoon https://icomoon.io/app/

You can pick what you need, and add others from libraries of icons like Font Awesome for example, like if you wanted the book icon from FA but liked bookmark icon from Icomoon, you can use both.

Then you can use it like so: <span class="icon-twitter"></span>

I used to just go with Font Awesome but have now switched to IcoMoon to assemble a custom icon font using just the icons I need.

Sounds similar to Icons8 that someone else mentioned, so I'll have to check that one out as well.

Now make it even shorter by using unicode.

+25% ❄
+25% 🔥
+25% ⚡
+25% ⚔
+25% 👕

and other stuff.

would be important for the font used to support the symbols, but you could use a custom font to put custom svgs into the game if existing fonts weren't good enough. what I have in mind is something sort of like the symbols in the KOTOR games for skills.

You guys should check out icomoon. It lets you pick and choose your icons from across multiple icon sets (including FA), and you can bundle it all together and ship only the icons you need.

Actually fonts like that are super useful and will contribute in the future, though wingdings specifically is obviously useless. But icon based fonts are really useful for building websites since otherwise you have to use images, and browsers work much better with text than images (for things like resizing or coloring). This site explains a lot.

Wow I wish I had known about that PromptFont ages ago. We bought some icon pack that fit our style and used https://icomoon.io/app to combine them into a font.

If you use the keyboard/mouse to play your game and then wiggle your controller, do the icons change? That was one of the most challenging things I had to tackle for our game.

^^^ This.. as an alternative if you have loads of vectors and you need to use them in conjunction with text consistently or the icons need to have dynamic states, it might be worth considering making a font from the vector files and including the icons as classnames, using the css 'content' property.

Edit: For reference https://icomoon.io/

check out icomoon's font creator, you can then use the icons like you would with FontAwesome within text strings.

Also gives you the added bonus of generating a Dart class of all your icons as well to allow easy usage within Flutter apps if you were so inclined.

I haven't done anything like that but it says in the docs that you can download and use your fonts as svgs.

If you can afford the luxury of paying for a font, heroicons are pretty freaking awesome.

This is sort of a different class than stock images. Graphical symbols and pictograms like this are often produced in sets.

For example, ISO 7001 is an international standard set of symbols you'll see all over the place.

Similarly, there are non-standardized yet popular icon font sets like Icomoon.

If you want something pretty quick and dirty, check out the IcoMoon App (documentation here). Otherwise, I'd recommend Grunt Webfont.

I have, on more than one occassion, had problems with Icon fonts that, for some reason, don't render in IE.

This includes font-awesome fonts. I suppose I might be doing something wrong but it is beyond difficult to figure out what is going on.

For instance if I try to use the "toggle-on" and "toggle-off" font awesome icons in IE with an angular directive the icons just don't show up (I get the fallback square for a missing font).

It's really annoying and is enough reason for me to look into using svg alternates.

This site makes it pretty easy to assemble a library of equivalent svg icons to most of the stuff I was using in font awesome:

https://icomoon.io/app/#/select

You can use any kind of lazy image loading solution depending on what libs/frameworks you're using. I use angular and angular-lazy-img. As far quality goes, you're better off keeping a slightly higher image resolution and compressing it more, because honestly your images look trash. I serve up images at much higher resolution at half the size - example.

I don't quite understand why you're webfont needs to be so large however. 65kb is massive. I'd recommend giving icomoon a shot and only selecting the icons you actually need.

Design wise its a bit a mess and I won't elaborate much, but I would suggest really take a look at how you use whitespace. One big design mistake I see is allowing text to stretch the full width of the page. On a big screen it does not look very good.

For one specific thing, I would get rid of the black background on hover for the page numbers on the raffle page. You might want to cross post to /r/web_design for better design advice.

There are many other icons that would convey the meaning of "send a message" without looking similar to the Messages app.

https://icomoon.io/#preview-ultimate

Go there and search for "bubble" - there are many variants cheaply licensed from that site that would give you a nice, clear icon without any risk of Apple disliking the button (see bubble-lines2 or bubble-lines4 for instance)

I can't see your site because it is down. So my generic advice is in order of importance:

1 - Reduce the number of requests your page is making. A good rule of thumb is that a web browser will only fulfill 6 requests concurrently from each domain (some browsers are 4, others are 8 and a few are something else). A CDN will help here a bit in the sense it will allow another 6 concurrent requests since it is on another domain. Mostly though you should combine assets where ever you can, I would say aggregating your css and js into the fewest number of files is equally as important as minifying (and in some cases more important). Use sprites or fonts to combine multiple small graphics into a single file.

2 - Optimize/minify the files you are serving. So minify your css/js and web optimize your images for both both resolution and compression.

3 - Optimize the order your files are being delivered in. Move that big ass javascript library to the bottom of your html and have it be one of the last things included. Items that directly impact the rendering of your page should go towards the top.

4 - Split up the workload. Remember your 6 concurrent files/domain rule of thumb, load jquery and fonts from a CDN (I prefer google for both but whatever floats your boat). I would say that if the first 3 items on this list bring your pageload speeds to acceptable levels then there isn't a huge need for moving images off to a CDN.

5 - Find a better host.

6 - If all else fails use a caching proxy like varnish.

You could use https://icomoon.io/app/#/select to create a font. Once created and installed, select 'insert icon' in MS office. This should happen

Choose the font (up arrow) then make sure the encoding is hex (down arrow)

Yep! Here is what I used to learn: https://github.com/blog/1135-the-making-of-octicons

There have been some good services pop up since that article was written that makes it even easier (easier than using Glyphs app and converting them manually). Check out http://fontastic.me/ and https://icomoon.io/

Thanks Kenny! Your stuff is awesome. I am trying to convert this to a font though using icomoon.io or https://www.fluttericon.com/ and it's not accepting the SVG format. Any ideas on what I might need to do?

Here are some sites that I've found helpful when designing icons:

• material.io - Google's interface design system which including keylines and guides for icon creation.
• ISO 7000 Graphical Symbol Library - This well known library of standardized symbols is used on devices, machinery, vehicles, etc. Symbols such as the popular ON/OFF symbol which has a circle with a line intersecting from the top ("standby" power mode symbol) are from here.
• icomoon.io - You can use this free web app to make icon fonts from your svg files and you can also select other free icon libraries to import into your font such as FontAwesome. Their documentation also has good tips for making icons and using them in your app or website.

I think you can't use images in tabbar. You should create your own icon set using fontello or icomoon and react-native-vector-icons to implement what you want

Some of the icons, at least, seem to be from the icomoon set. There's an WOFF file in the webui folder, and some of glyphs in it seem to be the same as the template icons. However, (a) most of the template icons weren't in that file and (b) the unicode supplied in that file didn't yield the right icons when put into the JSON.

In addition, I put in a random set of characters for the template in the JSON file, and it generated a star — which didn't show up in the file at all but visually looks like it's from icomoon.

So. While they likely used icomoon for some if not all of the glyphs, the tablet UI probably isn't pulling from the file I found. Even if they're using custom glyphs, they should still be in a file somewhere—I doubt remarkable draws them w/ inline XML every time they're on screen—I just haven't found it yet.

Nobody asked for any of this information, lol, this is just where I am in my hunt so far.

Ironically enough, I was working on making a font of the Sheikah alphabet for a little project I've started. I suppose I'll use this as an opportunity to make fonts of the rest of the alphabets as well. While I'm working on it, though, here's Ancient Sheikah. I uploaded them to icomoon to compile them, as I probably will for the others, unless someone knows an easier way to roll vector images into a font set.

Let me know if anyone finds this useful!

Visual Studio Code + platform.io to program the backend (c++ of course).

Angular 10 for frontend, no special frontend library (like bootstrap). I used a few icons from icomoon.io because I was too lazy to design anything myself, but other than that it's very vanilla.

You thin people will know that a brick opens a menu? Maybe I'm understanding wrong but that sounds like a terrible idea. Either way, here is a site that can convert images in icon fonts that WordPress can use. https://icomoon.io/app/#/select

Not sure baout yor theme, but many I use allow me to swap the hamburger icon to anything else.

What kind of icons?

You would be wise to use a service like https://icomoon.io/

They have all the icon fonts you could want and you customize your own collection and download them as a font. They come with SVG versions so they will be crisp and with a tiny bit of CSS, you can use the <i class='myfont-telephone'></i> nomenclature to add an icon of a telephone.

Plus, I think they have thousands for free.

You can use Icomoon to make a font from a collection of icons you can import some free icons from their library then add your own as .svg files without colour. Then go to the generate font and download it then unzip the file and get the .json file and the .tff file from the fonts folder. Give then both the same name then place them in internal storage/kustom/icons/

i actually tried to make a compacticons iconfont once (through the icomoon app) from the svg file the original author provided, but for some reason all the icons came out being slightly moved rather than being centered. i think i might add an option to switch the icons in the dock from iconfonts to bitmaps

I have a squircle svg sitting in my folder. I do not know where I found it as I have had it for some time. You can download it here. If you have other SVGs you could always make an IconFont at IcoMoon.

I do my orthography in Inkscape, then use icomoon.io to turn them into fonts!
I haven't even paid for it, it just saves all your projects/settings to your browser. All you have to do is export as individual, stroke (not path) SVG files :)

as mentioned, materialdesignicons is a pretty good choice, but it might lack some icons. if you find yourself needing more, you can download the needed svgs from material.io (also mentioned) and use icomoon to convert them to a fonticon.

you can export to svg and download icons from the official material design website, then take those and convert them to a fonticon using icomoon.

Overview

polybar, which changes the colors in Real-time/In-place or whatever you call it.

• WM : Openbox
• Icon Fonts : Icomoon-feather
• Text Fonts : Ubuntu Condensed
• Get Here : Github

Did you use the app that comes with it? https://icomoon.io/app/#/select

Benefits:

1. Can upload your own vectors to convert into icon packs

2. Can mix icons from multiple different packs - including your own custom icons fonts.

3. Can manage all your icon packs in realtime - includes an API to manage your icons in app.

4. Has at least 15 different icon packs, including Fontawesome that you can utilize and intermix.

5. You can edit icons colors, including multipart, multicolor icons.

6. It is free - though you can upgrade to include some paid icon packs.

Yes, I need to use Bootstrap :) My boss thinks it is holy grail or something, although I 100% agree with you.

Thank you for suggestion for Fontello. I have used https://icomoon.io/app but generally I don't like their app at all, it is a good example of a bad UX and it is very awkward to use... Fontello seems simple and fast :)

You have 2 separate problems :

1. The range of icons you need is not small (thus you may have to icons from multiple sources).

2. I assume (like most people) you're going with iconfonts. As you've discovered you cannot mix icons from different packs because the way which they're designed / created has a direct impact on how they're displayed (subject to line-height, anti-aliasing, etc).

Suggestions

In reverse order :

First instead of using iconfonts, use SVG (in a spritesheet). This will let you manipulate the dimensions more easily on a per icon basis and even tweak the icons themselves more easily in vector based editing apps (illustrator / inkscape). The other thing is you will need to establish a build process (grunt / gulp) to concat all the icons into a spritesheet.

Second, now that you can combine icons from multiple sources you can look at :

https://icomoon.io/app/#/select/library

Just be sure to check the licensing because it differs between packs.

Easiest way imho, is to clone/download the git repo and import it in something like Icomoon.

Font Awesome is already available in the libs here

When you're talking about background images that are photographs, as opposed to graphics, whether a device has high pixel density doesn't matter so much. The method you mentioned where you add differently sized versions of a background image as data attributes and load them in depending on screen width works really well for background images, because you're loading an optimised version of the image for the screen that it's being used on. So no desktop-sized image being loaded on a mobile device.

High pixel density creates complications when you're displaying graphics, like icons and logos, because the edges of these graphics can appear blurry, because there are edges. In photographs there aren't edges, so to speak, so the images won't really appear blurry in any way. To display graphics you have a number of options that work well - use an icon font, use SVGs (with a PNG fallback for browsers that lack support, which Modernizr can help you detect), or you can use a PNG that is twice the size that it needs to be, and display it at half its width.

Thank you so much! I turned an SVG into an icon font (since that font is not available on Google fonts and I didn't need all of the characters) using https://icomoon.io/ . You can use this to turn something you make in Illustrator into a icon font instead of using a .png, making it much lighter and faster.

I actually didn't make any of the icons in the game! I used free icon packs from Icomoon and the free glyphicons included with boostrap. It's a bit rough since they're designed for websites, not games, however I'm quite limited as I can't use any paid icon packs since I use github, which allows people to download the game files, which causes licensing problems.

Also, the staff is an icon of a leaf :) My icon skills show more in the form of figuring out which icons could technically pass as things they're not, haha.

> My objection to "anti-pattern" is that it implies I am doing something wrong.

Maybe this will change your mind: http://ianfeather.co.uk/ten-reasons-we-switched-from-an-icon-font-to-svg/

> If someone can point me to an SVG alternative that is as convenient as robust as font-awesome I will switch in a second.

https://icomoon.io

Yes, and probably/definitely. There's already tools that do it, such as icomoon, or if you wanted to make some in-house fonts via svg's use fontcustom.

I would like to stop using icon fonts but unfortunately i have to support IE8 for some clients so until that stops then ill have to keep using them over inline SVGs.

Saying that i used to use IcoMoon to create custom icon fonts and now i use the gulp-iconfont task to create the font form SVGs in a folder.

1. With https://icomoon.io/, you can create custom icon fonts using multiple preexisting ones. Check if this site contains some of the icon ideas you have.

2. Font Awesome constantly updates while taking suggestions from thousands of users. What happens when they eventually add in those missing icons?

You can find official source code on GitHub and create your own font using moonico online app. Please also note (if you do not know that) the following things:

• In Kustom you can also also use SVGs (just add an Image module and select mode -> Vector), this sometimes is cleaner than using a font for icons and uses less space, SVG source for material icons are available on GitHub, you can even point the HTTP source of the SVG on github repo using a formula :)
• In Kustom you can use "UTF" codes instead of typing letters, so, if you have an icon at char "0x123" you can use "$tc(utf, 123)$ instead of typing strange chars

Enjoy!

I'll just leave this here, though I do like many of the icons from this set better than others I've seen (things like arrows and text-alignment icons really don't need to be re-invented unless they're actually better, but many of the more details icons are nice):

https://icomoon.io/

I tend to use the Icomoon app to create custom icons with different grid options, as well as pick and choose only what I need for my font files (there's around 500 free icons to choose from).

Hmm you probably could compress SVG somewhat but then you'd have to decompress and I don't know that there would be much of a gain in terms of performance. Not to mention that unless you already had a custom client side decompression library/utilities you'd have to send those as well.

Check out:

https://icomoon.io/

They basically compress the svgs and serve em up as a sort of "sprite". You also get the appropriate "switches" to deliver the correct format for whatever browser you're using.

And again being able to apply things like text glow to fonts is great.

Finally... fuck xml. And not in a nice loving way.