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

Front-end
#1

Pessoal, bom dia.

Tudo bem ?

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

Estou utilizando o materialize.

Segue imagem de exemplo:

image
image.png555×647 26.9 KB

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>
#2

E a minha pagina principal:

image
image.png1634×748 44.7 KB

#3

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 !

#4

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!

#5

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,

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

#6

@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!

#7

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?

#8

@Mike!

Fiz algumas configurações e funcionou normalmente !

Graças a Deus !

Segue print:

image
image.png1600×900 150 KB

1 curtida
#9

Opa, ai sim!

Pode nos contar as alterações?

A página ficou bem bonita haha

#10 
    <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" />
1 curtida
#11

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 IT’S 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
}
1 curtida