[RESOLVIDO]Página com .xhtml não renderiza ícones

10 respostas
java
B

Pessoal, bom dia.

Tudo bem ?

Quaisquer página não mostra os ícones.

Estou utilizando o materialize.

Segue imagem de exemplo:

E o código fonte como esta:

<?xml version="1.0" encoding="UTF-8"?>
<h:head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="msapplication-tap-highlight" content="no"/>
    <meta name="description" content="Materialize is a Material Design Admin Template,It's modern, responsive and based on Material Design by Google. "/>
    <meta name="keywords" content="materialize, admin template, dashboard template, flat admin template, responsive admin template,"/>
    <title>Login Page | Materialize - Material Design Admin Template</title>

    <!-- Favicons-->
    <link rel="icon" href="images/favicon/favicon-32x32.png" sizes="32x32"/>
    <!-- Favicons-->
    <link rel="apple-touch-icon-precomposed" href="images/favicon/apple-touch-icon-152x152.png"/>
    <!-- For iPhone -->
    <meta name="msapplication-TileColor" content="#00bcd4"/>
    <meta name="msapplication-TileImage" content="images/favicon/mstile-144x144.png"/>
    <!-- For Windows Phone -->

    <!-- CORE CSS-->
    <h:outputStylesheet library="radikals" name="styles/materialize.css" />  
    <h:outputStylesheet library="radikals" name="styles/style.css" />  
    <h:outputStylesheet library="radikals" name="styles/page-center.css" />  

    <!-- INCLUDED PLUGIN CSS ON THIS PAGE -->
    <h:outputStylesheet library="radikals" name="styles/prism.css" />  
    <h:outputStylesheet library="radikals" name="javascripts/plugins/perfect-scrollbar/perfect-scrollbar.css" />
    <h:outputStylesheet library="radikals" name="javascripts/plugins/chartist-js/chartist.min.css" />


</h:head>

<h:body class="cyan">
    <!-- Start Page Loading -->
    <div id="loader-wrapper">
        <div id="loader"></div>        
        <div class="loader-section section-left"></div>
        <div class="loader-section section-right"></div>
    </div>

    <div id="login-page" class="row">
        <div class="col s12 z-depth-4 card-panel">
            <h:form class="login-form">
                <div class="row">
                    <div class="input-field col s12 center">                            
                        <img src="resources/radikals/images/login-logo.png" alt="" class="circle responsive-img valign profile-image-login"/>
                        <p class="center login-form-text">Material Design Admin Template</p>
                    </div>
                </div>
                <div class="row margin">
                    <div class="input-field col s12">
                        <p:inputText id="username" type="text" />
                        <label for="username" class="center-align">Email</label>
                    </div>
                </div>
                <div class="row margin">
                    <div class="input-field col s12">
                  <!-- É PARA RENDERIZAR, AQUI-->      <i class="mdi-action-lock-outline prefix"></i>
                        <p:inputText id="password" type="password" />
                        <p:outputLabel for="password" >Senha</p:outputLabel>
                    </div>
                </div>
                <div class="row">          
                    <div class="input-field col s12 m12 l12  login-text">
                        <input type="checkbox" id="remember-me" />
                        <label for="remember-me">Remember me</label>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s12">
                        <p:commandLink action="pages/principal/index.xhtml?faces-redirect=true" class="btn waves-effect waves-light col s12">Login</p:commandLink>                            
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s6 m6 l6">
                        <p class="margin medium-small"><a href="page-register.html">Register Now!</a></p>
                    </div>
                    <div class="input-field col s6 m6 l6">
                        <p class="margin right-align medium-small"><a href="page-forgot-password.html">Forgot password ?</a></p>
                    </div>          
                </div>

            </h:form>
        </div>
    </div>
    <!-- ================================================
      Scripts
      ================================================ -->
    <!-- jQuery Library -->
    <script src="resources/radikals/javascripts/jquery-1.11.2.min.js" type="text/javascript"/>

    <!--materialize js-->
    <script src="resources/radikals/javascripts/materialize.js" type="text/javascript"/>
    <!--prism-->
    <script src="resources/radikals/javascripts/prism.js" type="text/javascript"/>
    <!--scrollbar-->        
    <script src="resources/radikals/javascripts/plugins/perfect-scrollbar/perfect-scrollbar.min.js" type="text/javascript"/>
    <!--plugins.js - Some Specific JS codes for Plugin Settings-->        
    <script src="resources/radikals/javascripts/plugins.js" type="text/javascript"/>
    <!-- chartist -->
    <script src="resources/radikals/javascripts/plugins/chartist-js/chartist.min.js" type="text/javascript"></script>        
</h:body>

10 Respostas

B

E a minha pagina principal:

B

O meu web.xml :

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.1" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd">
    <context-param>
        <param-name>javax.faces.PROJECT_STAGE</param-name>
        <param-value>Development</param-value>
    </context-param>
    <context-param>
        <param-name>primefaces.THEME</param-name>
        <param-value>bootstrap</param-value>
    </context-param>
    <context-param>
        <param-name>primefaces.FONT_AWESOME</param-name>
        <param-value>true</param-value>
    </context-param>
    <context-param>
        <param-name>javax.faces.PROJECT_STAGE</param-name>
        <param-value>Development</param-value>
    </context-param>
    <context-param>
        <param-name>javax.faces.FACELETS_REFRESH_PERIOD</param-name>
        <param-value>0</param-value>
    </context-param>
    <servlet>
        <servlet-name>Faces Servlet</servlet-name>
        <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>*.xhtml</url-pattern>
        <url-pattern>*.jsf</url-pattern>
    </servlet-mapping>
    <session-config>
        <session-timeout>
            30
        </session-timeout>
    </session-config>
    <mime-mapping>
        <extension>eot</extension>
        <mime-type>application/font</mime-type>
    </mime-mapping>
    <mime-mapping>
        <extension>otf</extension>
        <mime-type>application/font-otf</mime-type>
    </mime-mapping>
    <mime-mapping>
        <extension>svg</extension>
        <mime-type>application/font-svg</mime-type>
    </mime-mapping>
    <mime-mapping>
        <extension>ttf</extension>
        <mime-type>application/font-ttf</mime-type>
    </mime-mapping>
    <mime-mapping>
        <extension>woff</extension>
        <mime-type>application/font-woff</mime-type>
    </mime-mapping>
    <mime-mapping>
        <extension>woff2</extension>
        <mime-type>application/font-woff2</mime-type>
    </mime-mapping>
    <welcome-file-list>
        <welcome-file>login.xhtml</welcome-file>
    </welcome-file-list>
</web-app>

Já tentei alterar os e mesmo assim não funcionam.

Por favor, me ajudem !

B

E o meu .css para ícones está, assim:

@font-face {
  font-family: "Material-Design-Icons";
  src: url("font/material-design-icons/Material-Design-Icons.eot?#iefix") format("embedded-opentype"), url("font/material-design-icons/Material-Design-Icons.woff") format("woff"), url("font/material-design-icons/Material-Design-Icons.ttf") format("truetype"), url("font/material-design-icons/Material-Design-Icons.svg#Material-Design-Icons") format("svg");
  font-weight: normal;
  font-style: normal; }

Abraço!

M
Bom dia.

Eu nunca usei o Materialize, então fica difícil te ajudar, mas ve se o post do JohamMa4 não te ajuda,

<aside class="onebox githubissue">
  <header class="source">
      <a href="https://github.com/google/material-design-icons/issues/205" target="_blank">github.com/google/material-design-icons</a>
  </header>
  <article class="onebox-body">
    <a href="https://github.com/jig9">
<img src="https://avatars1.githubusercontent.com/u/14047541?v=2&s=96" class="thumbnail onebox-avatar" width="60" height="60">
</a>

<h4><a href="https://github.com/google/material-design-icons/issues/205" target="_blank">Issue: Self-Hosted Material Icon Not Showing On Both Chrome and IE</a></h4>

<div class="date" style="margin-top:10px;">
	<div class="user" style="margin-top:10px;">
	opened by <a href="https://github.com/jig9" target="_blank">jig9</a>
	on <a href="https://github.com/google/material-design-icons/issues/205" target="_blank">2015-08-31</a>
	</div>
	<div class="user">
	closed by <a href="https://github.com/jig9" target="_blank">jig9</a>
	on <a href="https://github.com/google/material-design-icons/issues/205" target="_blank">2015-11-18</a>
	</div>
</div>

<pre class="content" style="white-space: pre-wrap;">I referred to this link http://google.github.io/material-design-icons/#getting-icons
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}
@font-face...</pre>

<div class="labels">
 	bug
 	help wanted
</div>

  </article>
  <div class="onebox-metadata">
    
    
  </div>
  <div style="clear: both"></div>
</aside>

Os icones do Font-Awesome do PrimeFaces não te ajudam?

B

@Mike ,
Bom dia.
O ideal é que pelo menos o layout funcionasse. Pois eu quero seguir um padrão, também!
Irei da uma olhada. Se alguém ou algum conhecido tenha analisado isto, antes me informe, favor !
Grande abraço!

M

O tema do bootstrap não esta funcionando?
Se não, tem que adicionar o jar.

O p:messages não esta encontrando as suas imgs tbm, você criou a pasta resources?

B

@Mike!

Fiz algumas configurações e funcionou normalmente !

Graças a Deus !

Segue print:

M

Opa, ai sim!

Pode nos contar as alterações?

A página ficou bem bonita haha

B
<h:outputStylesheet library="materialized" name="materialize.min.css" />

    <h:outputStylesheet library="materialized" name="style.min.css" />

    <!-- Custome CSS-->
    <h:outputStylesheet library="materialized" name="custom.min.css" />

    <!-- INCLUDED PLUGIN CSS ON THIS PAGE -->
    <h:outputStylesheet library="plugins/prism" name="prism.css" />
    <h:outputStylesheet library="plugins/perfect-scrollbar"
                        name="perfect-scrollbar.css" />
    <h:outputStylesheet library="plugins/chartist-js"
                        name="chartist.min.css" />

E os:

<h:outputScript library="js" name="jquery-1.11.2.min.js" />
    <!--materialize js-->
    <h:outputScript library="materialized" name="materialize.min.js" />
    <!--prism
<script type="text/javascript" src="js/prism/prism.js"></script>-->
    <!--     <h:outputScript library="plugins/prism" name="prism.js" /> -->
    <!--scrollbar-->
    <h:outputScript library="plugins/perfect-scrollbar"
                    name="perfect-scrollbar.min.js" />
    <!-- chartist -->
    <h:outputScript library="plugins/chartist-js" name="chartist.min.js" />

    <!--plugins.js - Some Specific JS codes for Plugin Settings-->
    <h:outputScript library="materialized" name="plugins.min.js" />
    <!--custom-script.js - Add your own theme custom JS-->
    <h:outputScript library="materialized" name="custom-script.js" />
B

Eu alterei de pasta e chamei custom.css:

/*================================================================================
Item Name: Materialize - Material Design layout Template
Version: 3.1

NOTE:

PLACE HERE YOUR OWN CSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.

WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES ITS BETTER LIKE THIS.  */

html, body {

height: 100%;

margin: 0;

}
.wrapper {
	min-height: 100%; 
	margin-bottom: -50px;
	padding-bottom: 20px;
}

    .footer, .push {
    	height: 50px;
    }

footer.page-footer {
	margin-top: 0px !important;
}

/* 	Font Material-Design */
@font-face {
	font-family: "Material-Design-Icons";
	src:
		url('#{facesContext.externalContext.requestContextPath}/resources/font/material-design-icons/Material-Design-Iconsd41d.eot?#iefix')
		format('embedded-opentype'),
		url('#{facesContext.externalContext.requestContextPath}/resources/font/material-design-icons/Material-Design-Icons.woff2')
		format('woff2'),
		url('#{facesContext.externalContext.requestContextPath}/resources/font/material-design-icons/Material-Design-Icons.woff')
		format('woff'),
		url('#{facesContext.externalContext.requestContextPath}/resources/font/material-design-icons/Material-Design-Icons.ttf')
		format('truetype'),
		url('#{facesContext.externalContext.requestContextPath}/resources/font/material-design-icons/Material-Design-Icons.svg#Material-Design-Icons')
		format('svg');
	font-weight: normal;
	font-style: normal;
}

/* 	Font Roboto */
@font-face {
	font-family: "Roboto";
	src:
		url('#{facesContext.externalContext.requestContextPath}/resources/font/roboto/Roboto-Thin.woff2')
		format('woff2'),
		url('#{facesContext.externalContext.requestContextPath}/resources/font/roboto/Roboto-Thin.woff')
		format('woff'),
		url('#{facesContext.externalContext.requestContextPath}/resources/font/roboto/Roboto-Thin.ttf')
		format('truetype');
	font-weight: 200
}

@font-face {
	font-family: "Roboto";
	src:
		url('#{facesContext.externalContext.requestContextPath}/resources/font/roboto/Roboto-Light.woff2')
		format('woff2'),
		url('#{facesContext.externalContext.requestContextPath}/resources/font/roboto/fonts/Roboto-Light.woff')
		format('woff'),
		url('#{facesContext.externalContext.requestContextPath}/resources/font/roboto/Roboto-Light.ttf')
		format('truetype');
	font-weight: 300
}

@font-face {
	font-family: "Roboto";
	src:
		url('#{facesContext.externalContext.requestContextPath}/resources/font/roboto/Roboto-Regular.woff2')
		format('woff2'),
		url('#{facesContext.externalContext.requestContextPath}/resources/font/roboto/Roboto-Regular.woff')
		format('woff'),
		url('#{facesContext.externalContext.requestContextPath}/resources/font/roboto/Roboto-Regular.ttf')
		format('truetype');
	font-weight: 400
}

@font-face {
	font-family: "Roboto";
	src:
		url('#{facesContext.externalContext.requestContextPath}/resources/font/roboto/Roboto-Medium.woff2')
		format('woff2'),
		url('#{facesContext.externalContext.requestContextPath}/resources/font/roboto/Roboto-Medium.woff')
		format('woff'),
		url('#{facesContext.externalContext.requestContextPath}/resources/font/roboto/Roboto-Medium.ttf')
		format('truetype');
	font-weight: 500
}

@font-face {
	font-family: "Roboto";
	src:
		url('#{facesContext.externalContext.requestContextPath}/resources/font/roboto/Roboto-Bold.woff2')
		format('woff2'),
		url('#{facesContext.externalContext.requestContextPath}/resources/font/roboto/Roboto-Bold.woff')
		format('woff'),
		url('#{facesContext.externalContext.requestContextPath}/resources/font/roboto/Roboto-Bold.ttf')
		format('truetype');
	font-weight: 700
}
Criado 10 de julho de 2018
Ultima resposta 10 de jul. de 2018
Respostas 10
Participantes 2