Hello, I am looking for a simple bluetooth icon about 16 pixels high, however when I try a bluetooth font or image resized it gets blurred. Curious if anyone has good recommendation on tiny icons or symbols for bluetooth connection, battery, etc. Thank you, Ben
I use an custom icon font I created. (A=Alarm Icon, B=Full Battery, b=Empty Battery, etc - a total of about 20 characters). I started with a font that was the size I wanted, then edited the .fnt and .png, with the .fnt to reflect the size of the "character", and in the .png, I did sometimes start with a resized image of something I found on the net (like the BT icon for example). Then it came down to pixel editing to clean things up. I did throw together a simple app that would display the character used in a standard font and the corresponding icon for that character, as it was an easy way to see how they all looked on an actual watch. It's kind of pain to do the pixel editing, but once it's done, it's done. (you might want to include a few extra characters in the font, so it's easy to add an icon you find you need at a later point)
You could do it as separate bitmaps (again, there would be pixel editing involved), but then you'd need multiple versions if you wanted to allow different colors for the icon (with a custom font, you just set the color as you do with things in a standard font).
Another thing that could be done, is draw your own in the code. In Fontless that's what I did (that watchface doesn't use any fonts - standard or custom)
You may want to look around for an open source watch face and grab the icons from there, and if it uses a custom font, things might be easier if you want to be able to change the colors.
You might checkout the icons in the Google Material Design Icon Library (material-design-icons-3.0.1.zip). You can read about them and the license here.
Hi Jim, I tried to insert some icons via a font (icons are small and about 20 pixels in length, 10 pixels in width). If I grab an icon from the web and insert it via Photoshop to that png file, things are not black and white but also gray on the contrast borders of that icon. This makes it difficult to edit. I am wondering how you did the pixel editing? Could you give me a hint?
The details are a bit fuzzy, as most of this I did back in early 2015, but here's the basics.
I started with a font (I don't recall which), and I'm not sure I did this, but fixed space would make it easier. Then I chose a character set, so I could do things like use A for alarm, P for phone, etc, added 0-9, and wound up with a set of maybe 20 characters. Using bmfont, I generated a font of the height I wanted (.fnt and ,png)
Then I used PaintShop on the .png, and many I just built a pixel at a time - "A" I turned into a bell, etc., and it was easy to find in the .png, as it was the "A" character.. Seems that for some, I found on the web, and again in paintShop, I refused them them to 2 color, and the proper size and edited them as needed, then pasted them over the corresponding character in the font's png.
To help things, I threw together a simple CIQ app to display all the possible icons so I could look at spacing, alignment etc, for all the icons together, and at times had to make mods to the data in the .fnt.
Yes, it was a pain to do!
ftrimboli actually has a font with a bunch of icons here that avoids the hassles.
