Иконка ресурса

Инструкция Локальная установка и подключение Font Awesome

Локальная установка и подключение иконочного шрифта Font Awesome

SOUL

АдминкА
Администратор
Сообщения
7.440
Симпатии
10.644
Баллы
266
#1
Пользователь SOUL разместил новый ресурс:

Локальная установка и подключение Font Awesome - Локальная установка и подключение иконочного шрифта Font Awesome

Я долго не могла понять, что такое Font Awesome и зачем он вообще нужен.

Думаю, и сейчас не до конца понимаю всех его возможностей, но очень хочется разобраться и понять, чем настолько уж хорош этот Font Awesome, что о нём очень часто встречаются упоминания в разных темах.

Первый раз я с ним столкнулась, когда выяснилось, что на стиле Flat Awesome, Flat Awesome dark и других стилях, использующих Font Awesome, иконки многим любимого хайда Esthetic отображались не корректно...
Узнать больше об этом ресурсе...
 

X-Oleg

Местный
Сообщения
588
Симпатии
619
Баллы
93
#2
Этот Font Awesome используется ещё и в плагине Xen Media Gallery, тоже нужно подключать, иначе в Галереи не будут отображаться иконки... ;)
 

SOUL

АдминкА
Администратор
Сообщения
7.440
Симпатии
10.644
Баллы
266
#3
Сейчас заметила, что в оконном режиме чата кнопки выглядят так же, как когда был ещё не подключён Font Awesome [XenforoTest.ru]иконки.jpg , интересно, как это исправить? Thoughtful_Girl3897
 

Zuzello

Проверенный
Сообщения
49
Симпатии
17
Баллы
3
#6
Так по ссылке ж сам мануал, как это реализовать. Или ты имеешь ввиду что-то другое?
Ну да, только я больше его ни где не видел, он у них под хайдом :confused: если не сложно, покажите как реализовать, если конечно вы сами видите материал :)
 

SOUL

АдминкА
Администратор
Сообщения
7.440
Симпатии
10.644
Баллы
266
#7
Ну да, только я больше его ни где не видел, он у них под хайдом :confused: если не сложно, покажите как реализовать, если конечно вы сами видите материал :)
Я возьму данный мануал с официального форума XenForo

Пожалуйста, Войдите или Зарегистрируйтесь для просмотра скрытого текста.

, откуда он и был изначально взят для размещения на форуме, куда ты указал ссылку. :)
 

witcherivan

Местный
Сообщения
150
Симпатии
132
Баллы
43
#10
а что нужно прописать в EXTRA.CSS чтобы исправить это в плеере медиа галереи.
Screenshot_8.png Screenshot_9.png
На дефолтном стиле всё ровно.
Screenshot_10.png Screenshot_11.png
или есть иной путь решения проблемы. стиль Silver от Brivium

нашел значение нужных кнопок:
/* звук */
<i class="fa fa-volume-up"></i> f028
/* плей */
<i class="fa fa-play"></i> f04b
/* пауза */
<i class="fa fa-pause"></i> f04c
/* развернуть */
<i class="fa fa-expand"></i> f065

Хотя возможно наоборот что то нужно удалить так как в EXTRA.CSS и так много чего то прописано:
PHP:
input[type=checkbox]
{
    position: relative;
    top: 2px;
}

#content .pageContent:after
{
    display: none;
}

.posterAvatar .miniMe
{
    display: none !important;
}

#pageDescription a
{
    color: inherit;
}

.searchResults
{
    padding: 0;
}

.navigationSideBar .section ul li:last-child a
{
    border: none;
}

#Notices
{
    margin-top: 10px;
}

.previewTooltip .posterDate.muted
{
    color: @mutedTextColor;
}

.mainContentBlock .primaryContent:last-child
{
    border: none;
}

#content .xengallerySideBar .avatarList .extraData a
{
    color: @contentText;
}

.sectionMain.pollBlock
{
    padding: 0;
}

.sectionMain.pollBlock .secondaryContent
{
    border: none;
    border-radius: 2px;
}

.Menu .sectionFooter
{
    color: @mutedTextColor;
}

/** BEGIN FOR SILVER **/

.titleBar.BRSV_style
{
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 0;
}

.titleBar h1 .prefix
{
    vertical-align: middle;
    color: @textCtrlBackground;
}

form.section.BRSV_style
{
    margin: 0;
}

.pageNavLinkGroup.titleNext
{
    background-color: @primaryLighter;
    padding-top: 10px;
    padding-bottom: 10px;
    margin: 0;
    border-radius: 0;
}

.pageNavLinkGroup.none
{
    display: none;
}

.sharePage .larger.textHeading
{
    float: left;
    margin-right: 10px;
}

#InlineModOverlay .button
{
    background-color: rgba(0,0,0,0.3);
    color: @contentText;
}

#content .container .xengallerySideBar .section h3,
#content .container .xengallerySideBar .section h3 a
{
    color: @contentText;
}

/** END FOR SILVER **/

/** BEGIN NODE LIST **/

.nodeList.sectionMain
{
    padding: 0;
}

.nodeList .node.node_2 > div
{
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
}

.node .nodeLastPost .muted,
.node .nodeStats.pairsInline dl,
.node .nodeStats.pairsInline dt,
.node .nodeStats.pairsInline dd
{
    color: inherit;
}

.node .nodeLastPost .lastThreadMeta .lastThreadUser
{
    margin-right: 20px;
}

.node .nodeLastPost .lastThreadTitle span
{
    margin-right: 25px;
}

.node .subForumList li .nodeTitle a
{
    display: inline-block;
    position: relative;
    padding-left: 9px;
}

.node .subForumList li .nodeTitle a:before
{
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 100%;
    background-color: @textCtrlBackground;
    position: absolute;
    top: 5px;
    left: 0;
}

/** END NODE LIST **/

/** BEGIN SIDE BAR **/

.profilePage .mast .secondaryContent,
.sidebar .secondaryContent
{
    background: none;
    padding: 0;
}

.sidebar .visitorPanel .secondaryContent .BRSV_sidebarInner
{
    width: 100%;
    box-sizing: border-box;
    display: inline-block; 
}

.BRSV_sidebarInner
{
    background-color: @contentBackground;
    padding: 10px;
    border-bottom-left-radius: 2px;
    border-bottom-right    -radius: 2px;
}

.sidebar .pairsJustified dt
{
    color:inherit;
}

.sidebar .avatarList li:first-child,
.sidebar .sharePage .shareControl:first-child
{
    margin-top: 0;
}

.sidebar .avatarList li:last-child
{
    margin-bottom: 0;
}

/** END SIDE BAR **/

/** BEGIN DISCUSSION LIST **/

.discussionListItem .posterDate.muted a
{
    color: @contentText;
}

.discussionListItem .posterDate .DateTime
{
    margin-left: 20px;
}

.discussionListItem .posterDate .itemPageNav a
{
    color: @discussionListItemPageNavLink.color;
}

.discussionList .stats.pairsJustified dt
{
    color: @contentText;
}

.discussionList .sectionFooter a
{
    color: inherit;
}

/** END DISCUSSION LIST **/

/** BEGIN MASSAGE AND CONVERSATION **/

.extraUserInfo .pairsJustified dt
{
    color: inherit;
}

.attachment .attachmentInfo.pairsJustified dt
{
    color: @contentText;
}

.profilePage .searchResult
{
    background: none;
}

/** END MASSAGE AND CONVERSATION **/

/** BEGIN MEMBERS **/

.textWithCount.subHeading .count:hover
{
    color:@contentText;
    text-decoration: none;
}

#ProfilePanes
{
    padding-bottom: 1px;
}

.memberListItem:last-child,
.event:last-child
{
    border: none;
}

.memberListItem .userBlurb .muted
{
    color: @contentText;
}

/** END MEMBERS **/

/** BEGIN OVERLAY **/

.xenOverlay .redactor_box
{
    background-color: black;
}

.xenOverlay #jumpMenu .jumpMenuColumn .primaryContent,
.xenOverlay .memberListItem .userBlurb .userTitle,
.xenOverlay .memberListItem .userBlurb .muted,
.xenOverlay .primaryContent a,
.xenOverlay a,
.xenOverlay .secondaryContent a,
.xenOverlay .pairsInline dt,
.xenOverlay .trophy .info .description,
.xenOverlay .sectionFooter,
.xenOverlay .ctrlUnit > dd .explain
{
    color: @mutedTextColor;
}

.xenOverlay .formOverlay .textCtrl[type=file],
.xenOverlay .formOverlay .textCtrl[type=file]:focus
{
    background-color: transparent;
    color: rgb(20,20,20);
}

.chooserColumns li a:hover .title
{
    color: @textCtrlText;
}

.xenOverlay .section > .sectionFooter
{
    padding: 0;
}

.xenOverlay .section > .sectionFooter.opposedOptions,
.xenOverlay .historyText.section > .sectionFooter
{
    padding: 5px 10px;
}

.xenOverlay .sectionFooter .button
{
    vertical-align: middle;
    background-color: @primaryDark;
    color: black;
}

.xenOverlay .historyText .sectionFooter
{
    text-align: right;
}

.xenOverlay .historyText .sectionFooter .button
{
    margin-left: 5px;
    float: none;
}

.xenOverlay :not(.historyText) .sectionFooter > .button
{
    position: absolute;
    top: 0px;
    right: 5px;
    float: right;
    visibility: visible;
    height: 33px;
    line-height: 33px;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -khtml-border-radius: 0;
    border-radius: 0;
    color: @primaryMedium;
    max-width: 27px;
    text-indent: 9999px;
    overflow: hidden;
    background: none;
    min-width: 35px;
    margin: 0;
}

.xenOverlay .sectionFooter .buttonContainer
{
    min-width: 75px;
    *min-width: 0;
    float: right;
    margin: 5px;
    line-height: 31px;
}

.xenOverlay .sectionFooter > .button:before
{
    content: url('@imagePath/extra/close.png');
    position: absolute;
    right: 0;
    font-size: 16px;
    top: 3px;
    text-indent: 0;
}

.xenOverlay.memberCard a.close
{
    background-image: url('@imagePath/xenforo/overlay/close.png');
}
.xenOverlay .formOverlay .button,
.xenOverlay .formOverlay .buttonContainer
{
    background-color: #ABABAB;
    color: white;
}
.xenOverlay .formOverlay .button:hover,
.xenOverlay .formOverlay .buttonContainer:hover
{
    background-color: #B0B0B0;
}

/** END OVERLAY **/

/** BEGIN MESSAGE AND CONVERSATION **/

.pageNavLinkGroup.BRSV_pageNavLinkGrounp_2
{
    border-top: 1px solid @primaryLighterStill;
    background-color: @contentBackground;
}

.messageUserBlock div.avatarHolder .avatar img
{
    width: 120px;
    height: 120px;
}

.messageMeta .item
{
    min-height: 16px;
    line-height: 16px
}

.item.control:before
{
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 16px;
    width: 20px;
    box-sizing: border-box;
    background: url('@imagePath/extra/brivium-icons.png') no-repeat;
    margin-right: 1px;
}

.item.control.report:before
{
    background-position: 0 0;
}

.item.control.report:hover:before
{
    background-position: 0 -20px;
}

.item.control.edit:before
{
    background-position: 0 -40px;
}

.item.control.edit:hover:before
{
    background-position: 0 -60px;
}

.item.control.delete:before
{
    background-position: 0 -80px;
}

.item.control.delete:hover:before
{
    background-position: 0 -100px;
}

.item.control.deleteSpam:before
{
    background-position: 0 -120px;
}

.item.control.deleteSpam:hover:before
{
    background-position: 0 -140px;
}

.item.control.ip:before
{
    background-position: 0 -160px;
}

.item.control.ip:hover:before
{
    background-position: 0 -180px;
}

.item.control.warn:before
{
    background-position: 0 -200px;
}

.item.control.warn:hover:before
{
    background-position: 0 -220px;
}

.item.control.LikeLink:before
{
    background-position: 0 -320px;
}

.item.control.LikeLink:hover:before
{
    background-position: 0 -340px;
}

.item.control.reply:before,
.item.control.postComment:before
{
    background-position: 0 -360px;
}

.item.control.reply:hover:before,
.item.control.postComment:hover:before
{
    background-position: 0 -380px;
}

.item.control.history:before
{
    background-position: 0 -240px; 
}

.item.control.history:hover:before
{
    background-position: 0 -260px; 
}

.item.control.MultiQuoteControl:before
{
    background-position: 0 -280px; 
}

.item.control.MultiQuoteControl:hover:before
{
    background-position: 0 -300px; 
}

.privateControls .item.control
{
    color: @contentText;
}

.publicControls .item.control
{
    color: @contentText;
}

.publicControls .item.hashPermalink
{
    color: @contentText;
    float: right;
}

.xenOverlay .messageSimple .poster a,
.xenOverlay .messageSimple .messageContent,
.xenOverlay .messageSimple .item.control,
.xenOverlay .messageSimple .item.muted
{
    color: @mutedTextColor;
}

.xenOverlay .messageSimple .item.control:before
{
    display: none;
}

.xenOverlay .messageSimple .messageInfo
{
    padding-right: 20px;
}

.xenOverlay .messageSimple .comment .commentContent,
.xenOverlay .messageSimple .comment .commentControls,
.xenOverlay .messageSimple .comment .commentControls .muted
{
    color: @mutedTextColor;
}

.bbCodeQuote .quoteContainer .quoteExpand:before
{
    content: "";
    position: absolute;
    left: 0;
    top: -80px;
    width: 100%;
    height: 80px;
    background: -webkit-linear-gradient(top, transparent 0%, @primaryLighterStill 80%);
    background: -moz-linear-gradient(top, transparent 0%, @primaryLighterStill 80%);
    background: -o-linear-gradient(top, transparent 0%, @primaryLighterStill 80%);
    background: linear-gradient(top, transparent 0%, @primaryLighterStill 80%);
}

#QuoteSelected a:before
{
    display: none;
}

/** END MESSAGE AND CONVERSATION **/

/** BEGIN MEMBERCARD **/

.xenOverlay.memberCard .pairsInline dt
{
    color: inherit;
}

.xenOverlay.memberCard a
{
    color: @textCtrlText;
}

/** END MEMBERCARD **/

<xen:if is="@enableResponsive">
@media(max-width: @maxResponsiveNarrowWidth)
{
    .Responsive .messageUserBlock a.username,
    .Responsive .messageUserBlock .userTitle
    {
        text-align: left;
    }
 
    .Responsive .messageUserBlock a.username
    {
        margin-bottom: 5px;
    }
 
    .Responsive .messageUserBlock .userTitle
    {
        margin-bottom: 0;
    }
 
    .Responsive .messageList .message
    {
        padding-left: 10px;
        padding-right: 10px;
    }
 
    .Responsive .attachment .boxModelFixer
    {
        margin-right: 0;
    }
 
    .Responsive .quickReply
    {
        padding: 10px;
    }
 
    .Responsive .submitUnit .button
    {
        margin-top: 10px;
    }
 
    .Responsive #QuickReply .submitUnit
    {
        text-align: center;
        margin-top: 0;
    }
}
</xen:if>
 
Последнее редактирование:

SOUL

АдминкА
Администратор
Сообщения
7.440
Симпатии
10.644
Баллы
266
#11
Попробуй в EXTRA.css добавить этот код
Код:
.vjs-default-skin .vjs-big-play-button:before {
  content: "\e001";
  font-family: VideoJS;
  /* In order to center the play icon vertically we need to set the line height
     to the same as the button height */

  line-height: 2.6em;
  text-shadow: 0.05em 0.05em 0.1em #000;
  text-align: center /* Needed for IE8 */;
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
}
 

SOUL

АдминкА
Администратор
Сообщения
7.440
Симпатии
10.644
Баллы
266
#12
Страницу не обновила, опоздала :)
 

witcherivan

Местный
Сообщения
150
Симпатии
132
Баллы
43
#13
Попробуй в EXTRA.css добавить этот код
Код:
.vjs-default-skin .vjs-big-play-button:before {
  content: "\e001";
  font-family: VideoJS;
  /* In order to center the play icon vertically we need to set the line height
     to the same as the button height */

  line-height: 2.6em;
  text-shadow: 0.05em 0.05em 0.1em #000;
  text-align: center /* Needed for IE8 */;
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
}
вариант не помог :(
предложили: папку videojs из дефолтного стиля так же скопировать в папку этого стиля, там шрифты, вдруг проканает.
попробую - отпишусь.
 

witcherivan

Местный
Сообщения
150
Симпатии
132
Баллы
43
#14
вариант с videojs сработал
запихнул эту папку:
/styles/brivium/silver/videojs
и сюда:
/styles/brivium/silver/xengallery/videojs
так же сюда закинул папку от другого стиля - бривиум:
/styles/brivium/silver/xengallery/bxslider
а так же код предложенный вами выше остался в
PHP:
.vjs-default-skin .vjs-big-play-button:before {
content: "\e001";
font-family: VideoJS;
/* In order to center the play icon vertically we need to set the line height
to the same as the button height */

line-height: 2.6em;
text-shadow: 0.05em 0.05em 0.1em #000;
text-align: center /* Needed for IE8 */;
position: absolute;
left: 0;
width: 100%;
height: 100%;
}
и ещё папочку font-awesome в корень форума я пристроил (в предыдущих попытках).

Что то из этого всего да помогло решить проблему :) Спасибо!
Screenshot_12.png Screenshot_13.png
 
Последнее редактирование:

witcherivan

Местный
Сообщения
150
Симпатии
132
Баллы
43
#15
...
Что то из этого всего да помогло решить проблему :) Спасибо!
Обновил стиль Silver под версию 1.5.1 - проблема вернулась...
Опытным путём было доказано что помогает решить проблему единственный вариант.
А именно: добавление папки videojs (взятой тут: /styles) в директорию /styles/brivium/silver
 

aligon

Проверенный
Сообщения
169
Симпатии
40
Баллы
28
#16
Скажите, а как узнать, поддерживает или не поддерживает стиль
Font Awesome
Мне нужно что бы кое где добавить иконок
 

SOUL

АдминкА
Администратор
Сообщения
7.440
Симпатии
10.644
Баллы
266
#17
Скажите, а как узнать, поддерживает или не поддерживает стиль
Font Awesome
Узнать используется ли в стиле или нет Font Awesome можно чисто визуально и проинспектировав элемент, который предположительно может использовать этот шрифт, например, кнопочки чата, редактора и пр.

Ещё как вариант провести поиск по шаблонам стиля по "Font Awesome" и посмотреть результат поиска.

О способах подключения этого шрифта https://xenforotest.ru/threads/menj...ski-opoveschenija-na-ikonki-font-awesome.408/
 

selectetwow

Проверенный
Сообщения
21
Симпатии
3
Баллы
3
#18
А как установить font awesome пятой версий ?
 
Вверх Снизу