search

phiamo / MopaBootstrapBundle

Easy integration of twitters bootstrap into symfony2
http://bootstrap.mohrenweiserpartner.de
709 stars 348 forks source link

icons displaying incorrectly (showing some kind of ascii text) #675

Closed jollyblume closed 11 years ago

jollyblume commented 11 years ago

I am using MopaBootstrapBundle:dev-master and twbs/bootstrap:3.0.x.

Icons are displaying as the character defined in the css:

mopabootstrapbundle-icontest

I didn't have trouble before moving to tb3 and older versions of mopa.

I created a new symfony2 app and added a test bundle to show an icon test page (graphic shown above) to make sure nothing else in my app was causing this and can't find anything on the web that relates.

I've spent many hours trying to resolve this and am getting frustrated. Since there seem to be no other reports of this problem, I assume I am doing something goofy.

Every problem with icons I have seen relate to invalid paths to font files, but that is not the issue here.

Icons on the tb3 site (and other places) display properly.

Any help will be much appreciated.

Here are the gory details (default code from bundles not included):

AppKernel.php

...
new Mopa\Bundle\BootstrapBundle\MopaBootstrapBundle(),
new Knp\Bundle\MenuBundle\KnpMenuBundle(),
new Knp\Bundle\PaginatorBundle\KnpPaginatorBundle(),
new Craue\FormFlowBundle\CraueFormFlowBundle(),
new BrainGlove\Bundle\TestBundle\BrainGloveTestBundle(),
...

config.yml

....
# Assetic Configuration
assetic:
    debug:          %kernel.debug%
    use_controller: false
    bundles:        [ MopaBootstrapBundle ]
    #java: /usr/bin/java
    filters:
        cssrewrite: ~
        less:
            node: "/usr/local/bin/node"
            node_paths: ["/usr/local/lib/node_modules"]
            apply_to: "\.less$"

mopa_bootstrap:
    form: ~  # Adds twig form theme  support
    menu: ~  # enables twig helpers for menu

BrainGloveTestBundle::layout.html.twig

{% extends "MopaBootstrapBundle::base.html.twig" %}

{% block headline %}
<h1><strong>BrainGloveTestBundle</strong></h1>
{% endblock headline %}

{% block title %}
Test
{% endblock title %}

BrainGloveTestBundle:Default:index.html.twig

{% extends "BrainGloveTestBundle::layout.html.twig" %}

{% block content_content %}
<ul>
    <li>{{ mopa_bootstrap_icon('glass')  }}</li>
    <li>{{ mopa_bootstrap_icon('paperclip') }}</li>
    <li>{{ mopa_bootstrap_icon('dashboard') }}</li>
    <li>{{ mopa_bootstrap_icon('chevron-up') }}</li>
    <li>{{ mopa_bootstrap_icon('chevron-down') }}</li>
    <li>{{ mopa_bootstrap_icon('chevron-left') }}</li>
    <li>{{ mopa_bootstrap_icon('chevron-right') }}</li>
</ul>
{% endblock content_content %}

HTML page source:

<html>
    <head>
        ...
        <link media="screen" rel="stylesheet" type="text/css" href="/dev-test/css/08beb90_mopabootstrapbundle_1.css">
        ...
    </head>
    <body data-spy="scroll">
       <div class="container">
           <div class="content">
           ...
           <div class="row">
               <div class="col-sm-9">
                   <ul>
                       <li>
                           <span class="glyphicon glyphicon-glass"></span>
                       </li>
                       <li>
                           <span class="glyphicon glyphicon-paperclip"></span>
                       </li>
                       <li>
                           <span class="glyphicon glyphicon-dashboard"></span>
                       </li>
                       <li>
                           <span class="glyphicon glyphicon-chevron-up"></span>
                       </li>
                       <li>
                           <span class="glyphicon glyphicon-chevron-down"></span>
                       </li>
                       <li>
                           <span class="glyphicon glyphicon-chevron-left"></span>
                       </li>
                       <li>
                           <span class="glyphicon glyphicon-chevron-right"></span>
                       </li>
                   </ul>
            </div>
    </div>
    ...

CSS page source

... @font-face { font-family: "Glyphicons Halflings"; src: url("/bundles/mopabootstrap/bootstrap/fonts/glyphicons-halflings-regular.eot?#iefix") format("embedded-pentype"), url("/bundles/mopabootstrap/bootstrap/fonts/glyphicons-halflings-regular.woff") format("woff"), url("/bundles/mopabootstrap/bootstrap/fonts/glyphicons-halflings-regular.ttf") format("truetype"), url("/bundles/mopabootstrap/bootstrap/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg"); }

.glyphicon {
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    position: relative;
    top: 1px;
}

.glyphicon:empty {
    width: 1em;
}

.glyphicon-asterisk:before {
    content: "*";
}

.glyphicon-plus:before {
    content: "+";
}
....
bierdok commented 11 years ago

can you test with font awesome instead ?

# MopaBootstrapBundle Configuration
mopa_bootstrap:
    icons:
        icon_set: fontawesome4
...
bierdok commented 11 years ago

check if the font file is correctly loaded in your browser.

then reload assetic bundle symlinks

php app/console assets:install --symlink
jollyblume commented 11 years ago

It turns out my font wasn't loading.

I had my project in a folder under the web root. I moved the project to the web root and all is well.

Since the mopabootstrapbundle.less file sets @icon-font-path: "/bundles/mopabootstrap/bootstrap/fonts/";, the path to font files is hard coded from the web root and can't handle being anywhere else.

I also changed the @icon-font-path in my variable.less, which also worked.

Sorry for the issue.

bierdok commented 11 years ago

glad you solved your problem. :+1: