how can I add Font Awesome subsilver

For support and discussion related to templates, themes, and imagesets in phpBB 3.1.
Suggested Hosts
Locked
driftypuddle6
Registered User
Posts: 19
Joined: Fri Mar 04, 2016 11:29 am

how can I add Font Awesome subsilver

Post by driftypuddle6 » Fri Mar 04, 2016 9:29 pm

hello

Can anyone tell how can I add Font Awesome to subsilver forum and topic icons I tried to do

Code: Select all

.imageset.forum_link {
content: "\f0ac";
}
.imageset.forum_read {
content: "\f0ea";
}
.imageset.forum_read_locked {
content: "\f0ea";
}
and so on
but they all come up blank
not sure why as it should be a easy fix of replacing background to content

Many thanks
David

User avatar
Arty
Former Team Member
Posts: 16654
Joined: Wed Mar 06, 2002 2:36 pm
Name: Vjacheslav Trushkin
Contact:

Re: how can I add Font Awesome subsilver

Post by Arty » Fri Mar 04, 2016 10:04 pm

content rule works only on pseudo selectors :after and :before, not on usual selectors.
Vjacheslav Trushkin / Arty.
Free phpBB 3.1 styles | New project: Iconify - modern SVG framework

driftypuddle6
Registered User
Posts: 19
Joined: Fri Mar 04, 2016 11:29 am

Re: how can I add Font Awesome subsilver

Post by driftypuddle6 » Fri Mar 04, 2016 11:05 pm

still the same but thanks for pointing that out :D

driftypuddle6
Registered User
Posts: 19
Joined: Fri Mar 04, 2016 11:29 am

Re: how can I add Font Awesome subsilver

Post by driftypuddle6 » Sat Mar 05, 2016 12:31 pm

ok here what I have

Code: Select all

span.imageset {
	background: transparent none 0 0 no-repeat;
	width: 60px;
	height: 40px;
	margin: 4px -30px 4px 10px;
	overflow: hidden;
	font-family: FontAwesome;
	color: #2c3e50;
	text-decoration: none;
	text-align: center;
	vertical-align: middle;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Read global announce topic */
.imageset.global_read:before, .imageset.global_read_mine:before, .imageset.global_read_locked:before, .imageset.global_read_locked_mine:before
               { content: "\f12a"; }
/* Unread global announce topic */ 
.imageset.global_unread:before, .imageset.global_unread_mine:before, .imageset.global_unread_locked:before, .imageset.global_unread_locked_mine:before
               { content: "\f12a"; color: #e74c3c; }
/* Read announce topic */
.imageset.announce_read:before, .imageset.announce_read_mine:before, .imageset.announce_read_locked:before, .imageset.announce_read_locked_mine:before
               { content: "\f129"; }
/* Unread announce topic */
.imageset.announce_unread:before, .imageset.announce_unread_mine:before, .imageset.announce_unread_locked:before, .imageset.announce_unread_locked_mine:before
               { content: "\f129"; color: #e74c3c; }
/* Forum as link */
.imageset.forum_link:before   { content: "\f0ac"; }
/*Read forum with subforum */
.imageset.forum_read:before, .imageset.forum_read_locked:before, .imageset.forum_read_subforum:before
               { content: "\f0ea"; }
/* Unread forum with subforum */
.imageset.forum_unread:before, .imageset.forum_unread_locked:before, .imageset.forum_unread_subforum:before
               { content: "\f0ea"; color: #e74c3c; }
/* Read sticky topic */
.imageset.sticky_read:before, .imageset.sticky_read_mine:before, .imageset.sticky_read_locked:before, .imageset.sticky_read_locked_mine:before
               { content: "\f08d"; }
/* Unread sticky topic */
.imageset.sticky_unread:before, .imageset.sticky_unread_mine:before, .imageset.sticky_unread_locked:before, .imageset.sticky_unread_locked_mine:before
               { content: "\f08d"; color: #e74c3c; }
/* Read topic */
.imageset.topic_moved:before, .topic_read:before, .topic_read_mine:before, .imageset.topic_read_hot:before, .imageset.topic_read_hot_mine:before, .imageset.topic_read_locked:before, .imageset.topic_read_locked_mine:before
               { content: "\f0f6"; }
/* Unread topic */
.imageset.topic_unread:before, .imageset.topic_unread_mine:before, .imageset.topic_unread_hot:before, .imageset.topic_unread_hot_mine:before, .imageset.topic_unread_locked:before, .imageset.topic_unread_locked_mine:before
               { content: "\f0f6"; color: #e74c3c; }

/* Start additional icons */
/* When in this topic is Your post */
.imageset.global_read_mine:after, .imageset.global_unread_mine:after, .imageset.announce_read_mine:after, .imageset.announce_unread_mine:after, .imageset.sticky_read_mine:after, .imageset.sticky_unread_mine:after, .imageset.topic_read_mine:after, .imageset.topic_unread_mine:after
               { content: "\f005"; color: #00CC00; font-size: 16px; position: absolute; }
/* When forum or topic is locked */
.imageset.global_read_locked   :after, .imageset.global_unread_locked:after, .imageset.announce_read_locked:after, .imageset.announce_unread_locked:after, .imageset.forum_read_locked:after, .imageset.forum_read_locked:after, .imageset.forum_unread_locked:after, .imageset.sticky_read_locked:after, .imageset.sticky_unread_locked:after, .imageset.topic_read_locked:after, .imageset.topic_unread_locked:after
               { content: "\f023"; color: #00CC00; font-size: 16px; position: absolute; bottom: 1px;}
/* When forum or topic is locked, and there is your post */
.imageset.global_read_locked_mine:after, .imageset.global_unread_locked_mine:after, .imageset.announce_unread_locked_mine:after, .imageset.announce_read_locked_mine:after, .imageset.sticky_read_locked_mine:after, .imageset.sticky_unread_locked_mine:after, .imageset.topic_read_locked_mine:after, .imageset.topic_unread_locked_mine:after
               { content: "\f005" "\00200B" "\002003" "\f023"; color: #00CC00; font-size: 16px; position: absolute;}
/* When topic is hot */
.imageset.topic_read_hot:after, .imageset.topic_unread_hot:after
               { content: "\f06d"; color: #FF0000; font-size: 16px; position: absolute; bottom: 1px; }
/* When topic is hot, and there is your post */
.imageset.topic_read_hot_mine:after, .imageset.topic_unread_hot_mine:after
               { content: "\f005" "\00200B" "\002003" "\f06d"; color: #FF0000; font-size: 16px; position: absolute;}
/* When forum have subforum */
.imageset.forum_read_subforum:after, .imageset.forum_unread_subforum:after
               { content: "\f15c"; color: #00CC00; font-size: 16px; position: absolute; bottom: 1px; }
/* Topic when was moved */
.imageset.topic_moved:after
               { content: "\f124"; color: #FF0000; font-size: 16px; position: absolute; bottom: 1px; }
/* End additional icons */

/* Read private message */
.imageset.pm_read:before
               { content: "\f0f6"; }
/* Unread private message */
.imageset.pm_unread:before
               { content: "\f0f6"; color: #FF0000; }

but still dont display it blank

any idea
Many Thanks
David

User avatar
Arty
Former Team Member
Posts: 16654
Joined: Wed Mar 06, 2002 2:36 pm
Name: Vjacheslav Trushkin
Contact:

Re: how can I add Font Awesome subsilver

Post by Arty » Sat Mar 05, 2016 12:45 pm

Try adding this:

Code: Select all

span.imageset { position: relative; }
span.imageset:before { position: absolute; top: 0; left: 0; right: 0; height: 40px; line-height: 40px; }
Vjacheslav Trushkin / Arty.
Free phpBB 3.1 styles | New project: Iconify - modern SVG framework

driftypuddle6
Registered User
Posts: 19
Joined: Fri Mar 04, 2016 11:29 am

Re: how can I add Font Awesome subsilver

Post by driftypuddle6 » Sat Mar 05, 2016 7:00 pm

Image

that what it looks like so in some way it working but still no display of the font Awesome

Many Thanks
David

User avatar
Arty
Former Team Member
Posts: 16654
Joined: Wed Mar 06, 2002 2:36 pm
Name: Vjacheslav Trushkin
Contact:

Re: how can I add Font Awesome subsilver

Post by Arty » Sat Mar 05, 2016 7:59 pm

Did you add @font-face to css? Fonts don't magically appear, they need to be ether installed on computer or loaded via font-face
Vjacheslav Trushkin / Arty.
Free phpBB 3.1 styles | New project: Iconify - modern SVG framework

driftypuddle6
Registered User
Posts: 19
Joined: Fri Mar 04, 2016 11:29 am

Re: how can I add Font Awesome subsilver

Post by driftypuddle6 » Sat Mar 05, 2016 8:19 pm

yes I have

Code: Select all

<link rel="stylesheet" href="{T_STYLESHEET_LINK}" type="text/css" />
<link rel="stylesheet" href="{T_STYLESHEET_LANG_LINK}" type="text/css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

driftypuddle6
Registered User
Posts: 19
Joined: Fri Mar 04, 2016 11:29 am

Re: how can I add Font Awesome subsilver

Post by driftypuddle6 » Sun Mar 06, 2016 3:45 am

ok so got forum main works
but not sub forum have I miss some style names should there be like

Code: Select all

.subforum_read .subforum_unread
Many thanks
David

driftypuddle6
Registered User
Posts: 19
Joined: Fri Mar 04, 2016 11:29 am

Re: how can I add Font Awesome subsilver

Post by driftypuddle6 » Sun Mar 06, 2016 12:43 pm

ok so this is what the main look like as it should

Image

and then the sub looks like this

Image
not how it should look

so getting some where just not sure why it one rule for one and not for other :S

any idea on this?

Many thanks
David

driftypuddle6
Registered User
Posts: 19
Joined: Fri Mar 04, 2016 11:29 am

Re: how can I add Font Awesome subsilver

Post by driftypuddle6 » Tue Mar 08, 2016 3:05 pm

ok got it at last :D

Image

but is there a way to get rid of the writing?

Many Thanks
David

Locked

Return to “[3.1.x] Styles Support & Discussion”