View Full Version : Cannot set $include-pictos-font to false. Bug? Bad convention? No big deal?

22 Jul 2013, 10:54 AM
I am working to optimize my project and one of the steps is to get the css file smaller. A great way to do this is to get rid of the pictos font which I am not using directly however the pictos font is "built in" to some of the components leaving me stuck with 80KB of unneeded markup in my css file.

I am using the "default" theme and I want to set $include-pictos-font: false however. I am using the Checkbox and List (with disclosure icon) components, this leaves me stuck keeping all of the Pictos font.

Is this bad practice by the Sencha team? Is this a bug? Or am I missing something simple?

To summarize -
I want to set:
$include-pictos-font: false

Checkbox component uses the Pictos font for the "Checkmark"
List component uses the Pictos font for the "Disclosure Icon"

I am looking for suggestions and I also wanted to bring up this issue because I have run into it several times now.

24 Jul 2013, 4:49 AM
If $include-pictos-font is set to false, this will not run:

@if $include-pictos-font {
@include icon-font('Pictos', inline-font-files('pictos/pictos-web.woff', woff, 'pictos/pictos-web.ttf', truetype,'pictos/pictos-web.svg', svg));

The disclosure rule will just set content : '>' in CSS so it will not automatically include the Pictos font.

24 Jul 2013, 9:07 AM
@mitchellsimoens (http://www.sencha.com/forum/member.php?22216-mitchellsimoens) Thank you for the reply I now see how my post could be interpreted the way that you did however I was trying to discuss if the practice of making primary components dependent on the Pictos font.

My goal is to trim the things that I am not using.
Since I do not use the 'Pictos' font I have set $include-pictos-font to false.
However this caused the unexpected consequence of my disclosure elements looking like ">" and checkboxes just have a meaningless colored "3".

I do know that "$include-pictos-font: false" does work and reduces my css file size
I have successfully included my own custom font to add special icons
I do not know how to get the disclosure and checkbox icons back without including the ENTIRE pictos font.
If I can get help getting these icons to render properly without the entire pictos font I would appreciate it.

Also, if somebody would like to defend the decision of making primary components (checkbox etc.) dependent on the pictos font I also would appreciate the discussion.
My argument is that it is bad practice to have a primary component (checkbox etc.) dependent on an "optional" add-on. A better solution would be to separate the appropriate icons from the optional Pictos font.

As an example this is the offending scss that makes the checkbox component depended on the Pictos font

.x-checkmark-base {
position: absolute;
top: 0;
right: 10px;
bottom: 0;
content: '3';
font-family: 'Pictos';
font-size: 1.6em;
text-align: right;
line-height: 1.6em;