Thanks for the info. I've made some changes, but still I'm only as close as
when I added the Font Awesome CSS with a ui:style element: I'm not seeing
the camera icon, only an empty rectangle with a heavy black border (running
in Chrome with SDM).
I've edited the CSS--now named fontAwesomeWoff.css--to look like
@font-face{
font-family:'FontAwesome';
@url fawoff woff?v=4.2.0;
font-weight:normal;font-style:normal}
.fa{display:inline-block;font:normal ...
My ClientBundle is
public interface FontAwesomeBundle extends ClientBundle {
FontAwesomeBundle INSTANCE = GWT.create(FontAwesomeBundle.class);
@NotStrict
@Source("./fonts/fontAwesomeWoff.css")
FontAwesome fa();
@DoNotEmbed
@MimeType("application/font-woff")
@Source("./fonts/fontawesome-webfont.woff")
DataResource woff();
public interface FontAwesome extends CssResource {
String fa();
@ClassName("fa-lg")
String large();
...
In my EntryPoint class, after setting the logging and window closing
handlers and injecting the global stylesheet (as in Showcase), I call
FontAwesomeBundle.INSTANCE.fa().ensureInjected();
To try this out, in my UiBinder file I put
<ui:with field='font' type='com.myapp.mobile.client.FontAwesomeBundle' />
...
<i class="{font.fa.fa} {font.fa.cameraRetro} {font.fa.scale3x}"></i>
but instead of the camera, I see an empty rectangle with a heavy black
border
I've attached a partial screen shot from Developer Tools showing the
element (<i class="EBB DEB...) and style. The font is in the style--see
EEB--but I don't see the camera icon on my page.
Have I missed some sort of injection? Should there be something more in my
*Impl.ui.xml file? Should I be adding something to the *Impl.java file that
pairs with the *Impl.ui.xml file? What am I missing that is keeping the
image icons from drawing?
On Wednesday, September 24, 2014 4:16:09 AM UTC-4, Thomas Broyer wrote:
>
>
>
> On Tuesday, September 23, 2014 11:36:59 PM UTC+2, Jens wrote:
>>
>> You need to define the font using @font-face.
>>
>> By default fontawesome.css contains
>>
>> @font-face {
>> font-family: 'FontAwesome';
>> src: url('../fonts/fontawesome-webfont.eot?v=4.2.0');
>> src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.2.0')
>> format('embedded-opentype'),
>> url('../fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'),
>> url('../fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'),
>> url('../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular')
>> format('svg');
>> font-weight: normal;
>> font-style: normal;
>> }
>>
>> at the very top of its CSS file which tells the browser about the font
>> "FontAwesome". You need to adjust this block to make it work.
>>
>> Since you only want woff you can remove everything else:
>>
>> @font-face {
>> font-family: 'FontAwesome';
>> src: url('../fonts/fontawesome-webfont.woff?v=4.2.0') format('woff');
>> font-weight: normal;
>> font-style: normal;
>> }
>>
>> Next you have to decide if you want to embed the font into your GWT app
>> as DataResource or if the browser should load the file normally like
>> defined above. If you want to use DataResource you need to replace the
>> url() part with the @url constant of GWT. If you want to leave it as is, I
>> would create a public folder, place all fonts in "public/fonts" and then
>> remove "../" from the url(). That way the font files will be copied to your
>> war/app/fonts folder whenever you GWT compile your app and should be
>> accessible by the browser. You might want to rename font files to contain
>> ".cache." if you place them into the public folder so your web server sets
>> correct caching headers.
>>
>
> I'd just use a DataResource in any case, and annotate it with @DoNotEmbed
> if I don't want the font embedded as a "data:" URL.
> GWT will take care of the copying, renaming, etc.
> Actually, if the font file is "big enough" (the data: URL would be longer
> than "(2 << 15) - 1" chars), it won't be embedded anyway, whether you use
> @DoNotEmbed or not.
>
--
You received this message because you are subscribed to the Google Groups
"Google Web Toolkit" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/d/optout.
