Im using the glyphicons Halfings Font via font face. (downloaded with twitter bootstap v3) When y tried to use the unicode for the camera, i cant get it to work... a rectanlgle shows up while other icons do show up.
This code results as expected, displays the trash can:
<span style='font-family: "Glyphicons Halflings"; font-size: 50px;'></span>
but this:
<span style='font-family: "Glyphicons Halflings"; font-size: 50px;'>📷</span>
instead of the displaying the camera, shows a rectangle.
Any help appriciated!
thanks!
Pancho
ok... found the solution! Turns out that in the font files used for bootstrap, the unicodes were changed for some of the icons. I understand they did this because of some issues with browser compatibility.
Here is the list of modfied/new unicodes:
lock - E033
bookmark - E044
camera - E046
fire - E104
bell - E123
wrench - E136
briefcase - E139
paperclip - E142
pushpin - E146
Found this info on a issue on twitter-bootstraps github proyect, check the link for details.
Hope it helps someone...
Pancho
Related
The theme connects with Font Awesome and I have been very successful with some icons and failed miserably on others. Roxima, which is widget-based has an area to input the icon name, not HTML. So for the puzzle piece, I inout fa-puzzle-piece and it shows on my website. Using the same method, I have tried to add chart-line, hiking, running, funnel-dollar without success. Any help would be appreciated.
I am not a technical wizard but I have been moving along changing my website to this new theme quite nicely until I ran into this glitch.
Thank you for any advice you can share.
Cheers!
Barbara
Im using blender to edit a video and when i try to render it, it comes up with the error: border rendering is not supported by sequencer.
Using blender 2.80
Disabling Render Region fixed the problem for me.
Turning off border rendering (render region blender 2.8) in Rendering -> Properties -> Output properties
fixed it for me.
I recall playing with menus and the hypothesis is that I checked it somewhere along the way to cause that problem in the first place.
I cant comment yet bc of reputation apparently, so I guess I have to leave my comment behind here. I do have an answer but I'm not sure if it is a correct one.
I had the same problem, and I think i fixed it by unchecking the sequencer box under Post processing in the same tab as where you edit the format and encoding etc. But now that it does let me render my video (just a picture with audio under it) the render result is audio only? Could be a seperate problem or part of this solution, idk. Would unchecking that box help for you?
In my project I'm using swiper.js as a slideshow, each slide either contains and image or a html5 video with webvtt captions / subtitles.
On debugging, we noticed that the subtitle position is wrong (too low, cuts off screen) on webkit browsers.
After much debugging it turned out that this css3 rule on the parent div (the swiper-wrapper) makes the vtt position wrongly:
transform: translate3d(-1024px, 0px, 0px)
When you put the video in the first slide, all goes well, since there's no css translate yet.
This seems to be a core webkit issue: default webvtt positioning breaks when using css translation on a parent.
The workaround I found is to add a line positioning in the vtt itself to every subtitle element, like so:
WEBVTT
00:00:02.160 --> 00:00:06.440 line:90%
hello world
00:00:06.560 --> 00:00:11.920 line:90%
testing subtitles
Any sentence without the "line: 90%" part is rendered partly offscreen. It seems this setting forces the webvtt parser / renderer to set itself to the correct position.
QUESTION: did anyone encounter this issue yet and is there any other (easier) workaround for this bug? Adding the "line:" part to all subtitles would be a hell of a job.. unless there's a good editor that can do that stuff in batch.
QUESTION 2: Since this seems to be a webkit vtt parser bug, anyone know where to best report this?
Test setup here: http://orgonemedia.nl/webvtt-bug/
I'm currently debugging some WebVTT files for English captions and other languages too. I'm experiencing a similar problem, although I can't say what is exactly causing it. I'm going to try the line:90% fix you've suggested here.
ANSWER TO YOUR QUESTION 1: Regarding the job of adding it to all the subtitles, you'll be happy to know that's actually pretty easy with the right tool. I use Sublime Text Editor. The way I would do it is use "Find all" to find all the occurrences of -->, then simultaneously edit each of those lines, using the arrow key to navigate across to the right place on the line (since each subtitle out-time is the same number of characters, 12), then type in line:90%
UPDATE:
So I implemented your suggestion, using the method I outlined, and it successfully repositioned my captions.
More details: I was only experiencing the problem of captions being half off the bottom of the video when viewing on an iPad. Oddly enough, viewing the same page on an iPhone, they were positioned correctly without any change. The 90% change still adjusted it up though.
Intriguingly the line:90% code does nothing to adjust caption position when viewing the page on Chrome.
I'm having trouble getting much at all to display on Safari desktop. I think there's something invalid about my file format, but I'm darned if I can find it.
When editing the captions through my video hosting service's caption editor (I'm using JWPlayer), the timecodes show up as being invalid:
Image showing caption editor with invalid warning
I'm experiencing a weird issue with skrollr - I followed the steps at https://ihatetomatoes.net/how-to-create-a-parallax-scrolling-website/ using just two slides - a background image with a header that fades and then page content. If I have !doctype set, the first slide doesn't go full-height - but works if I just use
I've seen Strange !doctype bug with parallax plugin 'skrollr', but I can't see anywhere where I'm defining an ambiguous height.
The site I'm working on is http://he.dev.binaryitsystems.com/
I got this fixed up by using the more up to date examples in the github repo.
I'm having a problem with Twitter Bootstrap Inputs showing correctly on safari 6.0.
Im pretty sure this was fine before I moved to Mountain Lion, and it does seem to be an issue with Chrome.
Basically in Safari, the right end of the input seems cut off an is not displaying correctly. Ive taken a screen shot to demo what I mean...
Safari:
Chrome:
Any ideas?
EDIT: Just looking at the Twitter Bootstrap site and I see that alot of their inputs have the same problem!
Anyone else seeing this?
The artifact appears to be an issue with Safari's rendering of border-radius, and is not specific to Twitter Bootstrap. See rendering borders on Apple's support forum. The inputs usually render normally after you select them.
Disabling border-radius on the affected elements with the following two lines removes the artifact. Be careful though, sometimes this causes even more puzzling artifacts on nearby buttons.
-webkit-border-radius: 0;
border-radius: 0;