Having trouble with bootstrap glyphicons -- need some help

[weheh]

Doing a double migration to web2py 2.9.5 and bootstrap. I'm trying to get glyphicons to work with buttons but icons not showing at all. For example:

my layout.html file has:

    response.files.insert(0,URL('static','css/web2py.css'))

    response.files.insert(1,URL('static','css/bootstrap.min.css'))

    response.files.insert(2,URL('static','css/bootstrap-responsive.min.css'))

in the header section and 

  <script src="{{=URL('static','js/bootstrap.min.js')}}"></script>

  <script src="{{=URL('static','js/web2py_bootstrap.js')}}"></script>

just before the end of the body.

My view, which includes layout.html, has:

{{= TAG.BUTTON(

             SPAN('test', _class='glyphicon glyphicon-th'),

            _id='my-btn',

            _type='button',

            _class='btn btn-default btn-lg',

            _title=current.T('test'),

            )

}}

This produces what looks like a bootstrap-like button with the label "test" on it, but no glyphicon.

I looked in the css/bootstrap.min.css as well as the css/web2py_bootstrap.css. the bootstrap.min.css refers to the ../img/glypicons-halflings.png while the web2py_bootstrap.css refers to the ../images/glyphicons-halflings.png files.

Why is one in ../img and the other in ../images? Seems unnecessarily complex, considering they are the same file. Regardless, I made sure both folders and files exist, but no joy.

Anybody got any ideas what's going on? Chrome browser debug console shows no errors. I've broken my pick on this long enough ... need some help

[Annet]

Hi,

In Firefox, I tested your TAG in one of my views and it displays both the glyphicon and 'test'.

The glyphicon and 'test' weren't aligned properly, which is solved making 'test' a
button attribute:


{{= TAG.BUTTON(
             SPAN(_class='glyphicon glyphicon-th'),
            'test',

            _id='my-btn',
            _type='button',
            _class='btn btn-default btn-lg',
            _title=current.T('test'),
            )
}}

I hope this helps you solve the issue.


Kind regards,

Annet

[weheh]

Thanks, Annet. I helps to know that it works for you. Since I'm not starting raw, but rather trying to migrate from jQuery UI, I wouldn't be surprised if something else was interfering with the code. I've tried to rip out all the old jQuery UI stuff, but maybe there's something lurking in the dark corners somewhere. I'll look some more.

[Annet]

Thanks, Annet. It helps to know that it works for you.

You're welcome.

Since I'm not starting raw, but rather trying to migrate from jQuery UI, I wouldn't be surprised if something else was interfering with the code. I've tried to rip out all the old jQuery UI stuff, but maybe there's something lurking in the dark corners somewhere. I'll look some more.

Just out of curiosity I gave your code a try in Safari and Chrome as well (on Mac OS X Mavericks Server) in
both browsers the text and icon are rendered correctly.

I am using a custom built version of jQuery UI, and replaced the css file with the one here: http://addyosmani.github.io/jquery-ui-bootstrap/
in my case Bootstrap and jQuery UI do not interfere.


Kind regards,

Annet

[weheh]

OK, got it to work. Problem is with class name, which should be class="icon-th"