Comments (21)
Hi @sirhomealot, what you're seeing is correct. Octicons, like most icon fonts, has its icons mapped to the Private Use Area within unicode. It doesn't have any icons in A-Za-z, which is what is used for the preview. The font shows you the GitHub mark as a fallback for any character you try to show that doesn't have an icon mapped to it.
If you click on one of the icons on http://octicons.github.com/ it will take you to an icon profile page which has a button that will copy the glyph to your keyboard. Just paste that glyph into a text area that has the github-octicons font applied to it and you should be ✨.
from octicons.
I see. Isn't there a way to download the glyphs to my Mac so that I'm not dependent on the GitHub page every time I want to use one of the icons?
from octicons.
I'm not quite sure what you mean. Can you describe what you're trying to accomplish?
from octicons.
Well let's say I'm in Photoshop and I want to use one of these icons. How would I do that without resorting to copying the glyph unicode from the GitHub page?
from octicons.
You could copy all of their symbols to some template file, and then copy from there.
from octicons.
Please forgive my ignorance, but isn't there a way to get these icons to display as a character map in FontBook or elsewhere? Fonts like Webdings and Wingdings do this, so why not Octicons?
from octicons.
See #5 for some info. Basically, they did not want to.
from octicons.
btw @cameronmcefee why not make them all selectable on http://octicons.github.com/ the main page?
from octicons.
OK. This must be a definition of "font" that I was previously unaware of :-)
from octicons.
In Octicons, we are making our own code points, because we are creating characters that don't exist in the Unicode standard. Unicode has a facility for this, called the Private Use Area. This is the correct place to put custom characters, and we follow that. The Webdings approach is the pre-Unicode, early 90s Windows 3.1 style way to do things
I just want stuff to work!
I'm not sure why Font Book doesn't do this by default, but if you click this button, you'll see things right:
from octicons.
Thanks @paulcbetts but for me, FontBook doesn't do this. Am I doing something wrong?
from octicons.
@sirhomealot What version of OS X are you running? On 10.9 and 10.10 this works. It could be that older versions aren't as smart
from octicons.
Yeah, I can confirm this works on 10.9.3
from octicons.
@sirhomealot I think the trouble is you need the latest Octicons font. Looks like you're using github-octicons
, but you need octicons
which you can download directly from here: https://github.com/github/octicons/tree/master/octicons
Whoops - this is wrong as @cameronmcefee pointed out.
from octicons.
@jglovier That's incorrect, your version is out of date 👅.
@sirhomealot The icons should be at the bottom of the list. Fontbook shows A-Z at the top.
from octicons.
I don't think you can select them in fontbook any way. And character viewer does not allow to set the font as far as I can tell, so I repeat this:
why not make them all selectable on http://octicons.github.com/ the main page?
from octicons.
If you find yourself coming to the site to copy the characters often and would prefer to not click through to the icon profiles, you can open the web inspector console on http://octicons.github.com and run copyMode()
, which will set a persistent setting that will make the home page a click-to-copy list. This currently isn't an advertised feature, but if enough people find clicking through to the profiles too much work, I'll consider making it more prominent.
from octicons.
Sorry for commenting a dead thread, but it seems better than opening a new issue just to follow on from what is discussed here.
On Windows 8.1 I'm seeing this when I double-click the octicons-local.ttf
file:
I'm guessing this is the same issue with Mac's Font Book not showing the icons unless you click the ABCD button? Am I correct in thinking that this isn't actually a font that would be usable in, say, Word?
from octicons.
Yeah, you would need Alt+(numeric code) to use it in Word.
from octicons.
thanks 👍
from octicons.
@dan-bennett the behavior your see is as expected. The icons exist in the private use spectrum of unicode, so typical latin letters that would appear in the preview show the default "empty" glyph. As a shortcut to finding the unicode characters needed to use the icons, you can check out the icon profile pages at https://octicons.github.com/, which have a button to copy the character to your clipboard.
from octicons.
Related Issues (20)
- [Bug] @primer/octicons-react `esm` is incorrectly exported
- [Bug] Esm requires file extension in d.ts files. HOT 2
- [Feedback]
- was the folder symlink icon removed for a reason? HOT 6
- [Bug] `@primer/octicons-react` v19.0.0 not published HOT 2
- [Feedback] No empty/unchecked checkbox to go with "checkbox" icon? HOT 2
- [Feedback] Repo Icons are inconsistent HOT 2
- [Feedback] HOT 1
- [Bug] Discrepancies Between Figma Octicons Set and React Library HOT 3
- Biling code
- Titel
- [Bug] HOT 1
- [Bug]: Using styled-octicons in development mode significantly bloats bundle HOT 2
- [Bug] Missing icons accessibility and accessibility-inset in 24px HOT 1
- [Feedback] Duplicated icons HOT 2
- [Feedback] Publish icon list as part of the build process HOT 1
- [Suggestion] Add `git-branch-deleted` and `tag-deleted` icons HOT 3
- [Bug] The SVGs in /build/svg/ don't have the `octicon` classes attached HOT 1
- [Bug] `@primer/octicons-react` includes raw SVG files, but are inaccessible HOT 1
- [Bug] `@primer/octicons` includes all the raw SVGs twice HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from octicons.