1

Criei um projeto Maven que está utilizando JSF2 mais o framework do Bootstrap, porém existem umas configurações do Bootstrap que não estão funcionando adequadamente, como vocês podem ver nas figuras abaixo.

Ele está sendo visualizado assim:

E na verdade era para estar assim:

Como faço para corrigir esse problema?

Esse é o cabeçalho da pagina para mostra como está configurado para receber as configurações do Bootstrap:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui"
    xmlns:f="http://java.sun.com/jsf/core">
<h:head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <h:outputStylesheet library="css" name="bootstrap-theme.css" />
    <h:outputStylesheet library="css" name="bootstrap-theme.min.css" />
    <h:outputStylesheet library="css" name="bootstrap.css" />
    <h:outputStylesheet library="css" name="bootstrap.min.css" />

    <h:outputScript library="js" name="jquery-2.1.4.min.js" />
    <h:outputScript library="js" name="bootstrap.js" />
    <h:outputScript library="js" name="bootstrap.min.js" />
</h:head>

Este é o único trecho da pagina que está apresentando problema;

<div class="row">
    <div class="col-sm-4">
        <div class="panel panel-default text-center">
            <div class="panel-body">
                <span class="glyphicon glyphicon-ok"></span>
                <h4>This is the Heading</h4>
                <p>Nam velit est, tempor vel posuere et, auctor a lectus.
                    Aenean gravida, est accumsan dictum rhoncus, lectus mi suscipit
                    lacus, suscipit accumsan augue tellus vitae dolor. Morbi in
                    euismod dui</p>
            </div>
        </div>
    </div>

    <div class="col-sm-4">
        <div class="panel panel-default text-center">
            <div class="panel-body">
                <span class="glyphicon glyphicon-star"></span>
                <h4>This is the Heading</h4>
                <p>Nam velit est, tempor vel posuere et, auctor a lectus.
                    Aenean gravida, est accumsan dictum rhoncus, lectus mi suscipit
                    lacus, suscipit accumsan augue tellus vitae dolor. Morbi in
                    euismod dui</p>
            </div>
        </div>
    </div>

    <div class="col-sm-4">
        <div class="panel panel-default text-center">
            <div class="panel-body">
                <span class="glyphicon glyphicon-play-circle"></span>
                <h4>This is the Heading</h4>
                <p>Nam velit est, tempor vel posuere et, auctor a lectus.
                    Aenean gravida, est accumsan dictum rhoncus, lectus mi suscipit
                    lacus, suscipit accumsan augue tellus vitae dolor. Morbi in
                    euismod dui</p>
            </div>
        </div>
    </div>
</div>

tentei dessa forma, porém não tive sucesso;

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

    src: url("#{resource['fonts:glyphiconshalflings-regular.eot]}");
    src: url("#{resource['fonts:glyphicons-halflings-regular.eot?#iefix")
        format('embedded-opentype'),
        url("#{resource['fonts:glyphicons-halflings-regular.woff2") format('woff2'),
        url("#{resource['fonts:glyphicons-halflings-regular.woff") format('woff'),
        url("#{resource['fonts:glyphicons-halflings-regular.ttf") format('truetype'),
        url("#{resource['fonts:glyphicons-halflings-regular.svg#glyphicons_halflingsregular")
        format('svg');
}

Essse é a estrutura do meu projeto;

inserir a descrição da imagem aqui

1
  • Boa noite, gostaria de saber se alguma das respostas lhe ajudou, se não por favor comente o que acha que falta.
    – Syzoth
    Commented 30/12/2015 às 2:58

2 Respostas 2

2

Antes de tudo:

  • Você não precisa referenciar bootstrap.css e bootstrap.min.css, utilize apenas o bootstrap.css depois você minifica.
  • Dentro do bootstrap.css vai ter algo parecido com isso...

    inserir a descrição da imagem aqui

Tente alterar a url dos icones para:

 @font-face {
        font-family: 'Glyphicons Halflings';
        src: url("#{resource['fonts/glyphicons-halflings-regular.eot']}");
        src: url("#{resource['fonts/glyphicons-halflings-regular.eot']}?#iefix") format('embedded-opentype'),
                url("#{resource['fonts/glyphicons-halflings-regular.woff']}") format('woff'),
                url("#{resource['fonts/glyphicons-halflings-regular.ttf']}") format('truetype'),
                url("#{resource['fonts/glyphicons-halflings-regular.svg']}#glyphicons-halflingsregular") format('svg');
    }

Assim sucessivamente.

5
  • poderia dá uma olhada na minha postagem, acabei de atualizar
    – user10264
    Commented 18/08/2015 às 12:48
  • Você tentou modificar seu bloco font-face em bootstrap.css para este da resposta? Commented 18/08/2015 às 13:22
  • fiz varias tentativas com essa resposta e não tive sucesso, por favor preciso ainda de ajuda.
    – user10264
    Commented 18/08/2015 às 13:40
  • cara, vc precisa colocar o diretorio onde está suas fontes... no lugar de: url("#{resource['fonts/glyphicons-halflings-regular...']} colocar url("#{resource['resources.fonts/glyphicons-halflings-regular...']} no lugar de fonts/ coloque o diretorio onde está suas fontes. Commented 19/08/2015 às 13:14
  • baseado na imagem no meu projeto que coloquei na postagem, aonde deve ficar as minhas fontes?
    – user10264
    Commented 20/08/2015 às 14:07
2

Existem algumas questões

  1. Você não pode carregar o bootstrap.js e bootstrap.min.js juntos

    • bootstrap.js é pra desenvolvimento
    • bootstrap.min.js é pra produção

    Aqui:

        <h:outputScript library="js" name="jquery-2.1.4.min.js" />
        <h:outputScript library="js" name="bootstrap.js" />
        <h:outputScript library="js" name="bootstrap.min.js" />
    

    Mude para se for produção:

        <h:outputScript library="js" name="jquery-2.1.4.min.js" />
        <h:outputScript library="js" name="bootstrap.min.js" />
    

    Mude para se for desenvolvimento:

        <h:outputScript library="js" name="jquery-2.1.4.min.js" />
        <h:outputScript library="js" name="bootstrap.min.js" />
    

    Quando carrega o bootstrap.js ele carrega também o .map

  2. Com o CSS também, algo como:

     <h:outputStylesheet library="css" name="bootstrap-theme.css" />
     <h:outputStylesheet library="css" name="bootstrap-theme.min.css" />
     <h:outputStylesheet library="css" name="bootstrap.css" />
     <h:outputStylesheet library="css" name="bootstrap.min.css" />
    

    Se for produção, use somente:

     <h:outputStylesheet library="css" name="bootstrap.min.css" />
     <h:outputStylesheet library="css" name="bootstrap-theme.min.css" />
    

    Se for desenvolvimento, use somente:

     <h:outputStylesheet library="css" name="bootstrap.css" />
     <h:outputStylesheet library="css" name="bootstrap-theme.css" />
    

    Note que o tema sempre deve vir depois do bootstrap, pra não quebrar a hierarquia.

    O resultado final deve ficar algo como:

    • Se for ambiente de desenvolvimento:

      <h:head>
          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
          <h:outputStylesheet library="css" name="bootstrap.css" />
          <h:outputStylesheet library="css" name="bootstrap-theme.css" />
      
          <h:outputScript library="js" name="jquery-2.1.4.min.js" />
          <h:outputScript library="js" name="bootstrap.js" />
      </h:head>
      
    • Se for ambiente de produção:

      <h:head>
          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
          <h:outputStylesheet library="css" name="bootstrap.min.css" />
          <h:outputStylesheet library="css" name="bootstrap-theme.min.css" />
      
          <h:outputScript library="js" name="jquery-2.1.4.min.js" />
          <h:outputScript library="js" name="bootstrap.min.js" />
      </h:head>
      
  3. Acredito que este seja o teu problema (note que os anteriores podem refletir neste problema, principalmente por causa do uso do tema), detalhando a resposta do @rafaelblink:

    • #{resource['fonts:glyphiconshalflings-regular.eot]} por exemplo você abre o apostrofo ', mas não o fecha.
    • ?#iefix você usou ? dentro de resource e não fechou o o {[ quando deveria com ]}, note que ? e # devem ir depois de ]} pois não fazem parte do "caminho real" do resource.

    O código deve ficar assim:

    @font-face {
        font-family: 'Glyphicons Halflings';
        src: url("#{resource['fonts:glyphiconshalflings-regular.eot']}");
        src: url("#{resource['fonts:glyphicons-halflings-regular.eot']}?#iefix")
            format('embedded-opentype'),
            url("#{resource['fonts:glyphicons-halflings-regular.woff2']}") format('woff2'),
            url("#{resource['fonts:glyphicons-halflings-regular.woff']}") format('woff'),
            url("#{resource['fonts:glyphicons-halflings-regular.ttf']}") format('truetype'),
            url("#{resource['fonts:glyphicons-halflings-regular.svg']}#glyphicons_halflingsregular")
            format('svg');
    }
    

    Se falhar, siga o que recomendei aqui (Não edite os arquivos originais): https://pt.stackoverflow.com/a/82225/3635

    Crie um arquivo chamado main.css e adicione o @font-face {...} nele.

Você deve fazer log-in para responder a esta pergunta.