Glyphicon not rendering

[RedBully]

Hello,

I'm trying to render a glyphicon in a table cell by using the render function to set the cell content to
 

Code: [Select]

<span class='glyhicon glyphicon-search'></span>
On loading the page and inspecting the code, the grid cell looks ok:

Code: [Select]

<td class="pq-grid-cell " pq-col-indx="0">

    <span class="glyphicon glyphicon-search">
    </span>

</td>

But the icon is not rendering correctly.  I get a square block with E00E in it which is the type of icon I would get if the glyphicon library was not being referenced correctly.  The icons display correctly in the rest of the web page so I was wondering why they are not showing correctly here.

(I'm using both font-awesome and glyphicons in my webiste and have the same problem with both)

Any ideas?

[paramvir]

It works fine. Please check this jsfiddle.

http://jsfiddle.net/b6b710mz/29/

[RedBully]

Hello

Thanks for that.  I updated the jsFilddle to put in some additional icons in the call to render:

Code: [Select]

        var test = "<span class='glyphicon glyphicon-pencil'></span>";
        test += "<span class='glyphicon glyphicon-envelope'></span>";
        test += "<span class='glyphicon glyphicon-glass'></span>";
        test += "<span class='glyphicon glyphicon-music'></span>";
        test += "<span class='glyphicon glyphicon-search'></span>";
        test += "<span class='glyphicon glyphicon-heart'></span>";
        test += "<span class='glyphicon glyphicon-star'></span>";
        return test;

This is interesting because only pencil and envelope get displayed and also they don't look like the right icons as shown here:
http://getbootstrap.com/components/#glyphicons
or here:
http://glyphicons.com/

It looks like the grid is just rendering the default UTF-8 character from its built in character set
http://www.utf8icons.com/character/9999/pencil

It implies that the underlying font files are not being referenced correctly.
The bootstrap css references the font files with a relative URL

Code: [Select]

@font-face {
  font-family: 'Glyphicons Halflings';

  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), .......
}

Could the relative URL be wrong in the context of the grid?

[paramvir]

yes, you are right. glyphicons do not work properly in pqgrid.

That doesn't seem to be a url related issue. I'm looking for a workaround and would share the solution ( if found ) with you.

[RedBully]

I did some testing using the FireFox Inspector and noticed that the following CSS is being picked up:

Code: [Select]

div.pq-grid *{
font-family:Arial;
font-size:12px;
margin:0;
padding:0;
line-height:normal
}

Using the inspector ability to turn of CSS features, I turned off the font-family and this fixed the problem.

Do you have any ideas on how to best resolve this without impacting on the grid at all?

[RedBully]

I have implemented a workaround to this problem by adding the following CSS to one of my CSS files:

Code: [Select]

div.pq-grid .glyphicon {
    font-family: "Glyphicons Halflings";
}

Do you have a better solution because this fix is coupled to both the implementation of Bootstrap/Glyphicons AND the implementation of ParamQuery.

[paramvir]

Thanks for sharing the workaround. The other way could be to remove font-family and font-size from the pqgrid css and let it pick them from the page default style similar to JQueryUI widgets. That would avoid any conflict.