21
Май
2018

JSF подключение css и font-awesome

Всем добрый день. Изучаю JSF, и в ходе построения страницы возникли несколько вопросов,на которые найти какой то правильный ответ не смог.

1) Если в HTML существуют теги header/footer, то в jsf из-за отсутствия тегов header/footer приходится инклудить уже созданные jsf страницы. Каким образом я могу применить стиль из css файла к этой jsf странице, если при работе с HTML я в css файле просто указываю header{...} для тега header? При этом стили из css файла работают для тегов h:panelGroup в этих jsf страницах.

2)Как мне задействовать стили для элементов в блоках h:panelGroup(li,ui и др), потому что стили из css работают только для элементов с styleClass ?

3)Как подключить к jsf странице шрифты font-awesome ? При подключении этих шрифтов на месте иконок пустые квадраты, использую бесплатные иконки.

4)Можно ли создать более менее красивый блок ссылок с помощью nav в jsf или нужно использовать какой то отдельный тег ?

Надеюсь все вопросы понятно изъяснил, всем заранее спасибо.

main.xhtml

    <?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://xmlns.jcp.org/jsf/html"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
    <title>Магазин</title>
    <h:outputStylesheet library = "css" name = "normalize.css" />
    <h:outputStylesheet library = "css" name = "960.css" />
    <h:outputStylesheet library = "font-awesome" name="css/fontawesome-all.min.css" />
    <h:outputStylesheet library = "css" name = "style1.css" />
</h:head>

<ui:include src="header.xhtml"/>

<h:body>
    <ui:include src="content.xhtml"/>
</h:body>

<ui:include src="footer.xhtml"/>

</html>

header.xhtml

<ui:composition
        xmlns="http://www.w3.org/1999/xhtml"
        xmlns:f="http://xmlns.jcp.org/jsf/core"
        xmlns:h="http://xmlns.jcp.org/jsf/html"
        xmlns:ui="http://xmlns.jcp.org/jsf/facelets">

    <h:panelGroup layout="block" id="header" styleClass="header">
    <h:panelGroup layout="block" styleClass = "wrapperHeader">
    <h:panelGroup layout="block" styleClass="logo">
        <img src="image/icon.jpg"/>
    </h:panelGroup>
    <h:panelGroup layout="block" styleClass="phone">
        <p>Интернет магазин</p>
        <p>Телефон:121515132</p>
        <h:panelGroup rendered="#{authBean.loggedIn()}">
            <p>Авторизирован</p>
        </h:panelGroup>
    </h:panelGroup>
    </h:panelGroup>

        <nav id="menu">
        <ul>
            <li><a href="main.xhtml">Главная</a></li>
            <li><a href="main.xhtml">Еще одна ссылка</a>
                <ul class="submenu">
                    <li>
                        <h:link value="link1" outcome="main"/>
                        <h:link value="link2" outcome="main"/>
                    </li>
                </ul>
            </li>
        </ul>
    </nav>
    </h:panelGroup>
</ui:composition>

footer.xhtml

<ui:composition
        xmlns="http://www.w3.org/1999/xhtml"
        xmlns:f="http://xmlns.jcp.org/jsf/core"
        xmlns:h="http://xmlns.jcp.org/jsf/html"
        xmlns:ui="http://xmlns.jcp.org/jsf/facelets">

    <h:panelGroup layout="block" id="footer" styleClass="footer">
        <h:panelGroup layout="block" styleClass="container_12">
            <h:panelGroup layout="block" styleClass="grid_12">
                    <ul class="icons">
                        <li><a href="#"><i class="fab fa-vk fa-3x"></i></a></li>
                        <li><a href="#"><i class="fab fa-facebook fa-3x"></i></a></li>
                        <li><a href="#"><i class="fab fa-twitter fa-3x"></i></a></li>
                        <li><a href="#"><i class="fab fa-google-plus fa-3x"></i></a></li>
                    </ul>
            </h:panelGroup>
        </h:panelGroup>
            </h:panelGroup>
</ui:composition>

style1.css

.logo, .phone {
float:left;
width: 33%;

}

.wrapperHeader {
background-color: #7c4dff;
overflow: hidden;
}

header{
    box-shadow: 0px 0px 15px 2px #202020;
}

.content{
    min-height: 100%;
}

.phone p{
    color: #fff;
    font-size: 25px;
    margin-top: 20px;
}
nav{
    width:100%;

}

#menu ul{
    padding-top: 0;
    margin:0;
}

#menu ul li{
    list-style: none;
    display: inline-block;
    position: relative;
}

#menu ul li a{
    color: inherit;
    text-decoration: none;
    font-size: 16px;
    display: block;
    padding: 0 10px;
    line-height: 40px;

}

#menu ul li:hover .submenu {
    display: block;
}


.submenu li:hover {
    background-color: #7c4dff;
    color: #fff;
}


.submenu {
    position: absolute;
    display: none;
    background-color: #fff;
    padding: 0;
    border: 1px solid #e1e1e1;
}

.submenu li{
    min-width: 170px;
}

.text-center{
    text-align: center;
}
.footer{
    background-color: #232323;
    height: 200px;
}
.icons{
    text-align: center;
}

.icons li{
    display: inline-block;
    list-style: none;
    margin: 0 10px;
}

.icons li a{
    color: #fff;
    font-size: 20px;
}

.fa-vk:hover{
    color: #4e729a;
}
.fa-facebook:hover{
    color: #3a5795;
}
.fa-twitter:hover{
    color: #55acee;
}
.fa-google-plus:hover{
    color: #dd4b39;
}

Иерархия папок:

Источник: https://ru.stackoverflow.com/questions/830866/jsf-%D0%BF%D0%BE%D0%B4%D0%BA%D0%BB%D1%8E%D1%87%D0%B5%D0%BD%D0%B8%D0%B5-css-%D0%B8-font-awesome

Тебе может это понравится...

Добавить комментарий