search

ovity / octotree

GitHub on steroids
https://www.octotree.io/
GNU Affero General Public License v3.0
22.83k stars 1.78k forks source link

Strange characters are shown in place of icons #250

Closed buunguyen closed 8 years ago

buunguyen commented 8 years ago

GitHub recently introduced a change. Basically the site doesn't load the Octicons icon font anymore. This causes all icons in Octotree to show strange characters. I have released the fix for Chrome in 2.0.4. If you encounter the issue, please make sure the extension is up to date (or remove & add back if necessary). I will release an update for Opera shortly.

As for Firefox and Safari, there's no solution yet. The current fix requires embedding the font file with the extension and declare a @font-face in github.less. But I haven't found a way to embed custom font for Firefox addon (haven't tried Safari). I tried to base64-encode the font and embedded it into @font-face's src, but still couldn't make it work. If anyone has any suggestion or make a PR to fix, it's highly welcome.

leoj3n commented 8 years ago

:+1: I can confirm this fixes it.

joedf commented 8 years ago

That's unfortunate. I imagine you have already tried the solutions from here: http://stackoverflow.com/a/24359746/883015 Although it might not be optimal, you could use hosted versions from cdnjs: https://cdnjs.com/libraries/octicons Otherwise, it might be better to just fall back to images.

mikhoul commented 8 years ago

I agree for the fallback on images for Firefox.

joedf commented 8 years ago

I got it. Let's just use SVG like GitHub is doing right now. For example (Star Button :star: ):

<svg aria-hidden="true" class="octicon octicon-star" height="16" role="img" version="1.1" viewBox="0 0 14 16" width="14"><path d="M14 6l-4.9-0.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14l4.33-2.33 4.33 2.33L10.4 9.26 14 6z"></path></svg>
buunguyen commented 8 years ago

Can the fix be applied strictly to the github.less only? So that it wouldn't affect GitLab. I suppose we can conditionally change templates & code, but that change will be ugly and difficult to maintain.

crashbell commented 8 years ago

How about using DataURI to include SVG directly in github.less?

joedf commented 8 years ago

@buunguyen Ahhh right... I understand :( @crashbell That might work. Can anyone test or confirm this?

crashbell commented 8 years ago

@joedf I tested and it could work with some adjustment. The code would be something like:

screen shot 2016-02-03 at 11 35 44 am
buunguyen commented 8 years ago

@crashbell thanks for looking into this. Do you have time for a PR?

crashbell commented 8 years ago

I will work on this within this weekend. It pretty takes time to find the corresponding SVG icons.

joedf commented 8 years ago

@crashbell Got the SVGs for ya, looking foward to the PR :) :+1:

Unicode Class name SVG
f02c .octicon-question question.svg
f001 .octicon-repo repo.svg
f020 .octicon-git-branch git-branch.svg
f016 .octicon-file-directory file-directory.svg
f011 .octicon-file-text file-text.svg
f00b .octicon-cloud-download cloud-download.svg
f017 .octicon-file-submodule file-submodule.svg
f02f .octicon-gear gear.svg
f078 .octicon-chevron-right chevron-right.svg
f0a4 .octicon-chevron-left chevron-left.svg
crashbell commented 8 years ago

Thank you @joedf A PR was made here #252

joedf commented 8 years ago

Great! :+1:

buunguyen commented 8 years ago

Updated version has been submitted to the stores. Many thanks to @crashbell and @joedf for helping out with this!