Shady
New Member
Posts: 9
inherit
139701
0
Dec 2, 2016 12:02:02 GMT -8
Shady
9
April 2009
shadyrabbit
|
Post by Shady on Apr 14, 2016 15:38:21 GMT -8
Hello,
I've seen it done a few times, but I haven't found any easy snippets of code or anything of the sort which can help someone replace icons with font awesome glyphs with ease. If there isn't one—I'm not requesting anyone make anything of the sort. I would, however, be very interested in knowing if there's an easy-to-browse list of Proboards Variables so that I might be able to change things up myself.
|
|
inherit
133146
0
Jan 7, 2024 2:07:03 GMT -8
Alanna 🥀🖤
3,564
November 2008
alannab
|
Post by Alanna 🥀🖤 on Apr 14, 2016 19:24:54 GMT -8
elli has a thread on it on Adoxography, however, I'm not sure if it's on here.
|
|
inherit
I need a new CT, thinking.... [insert Jeopardy theme song here]
110769
0
Aug 21, 2021 0:07:21 GMT -8
Tumbleweed
20,825
September 2007
tumbleweed
|
Post by Tumbleweed on Apr 14, 2016 19:53:59 GMT -8
Just to add to the mix of help your getting, this is how I did mine on a test site, for the new/old (on/off) icons on the main page. This is in board template> board lists tab.
<td class="icon"> {if $[board.is_new]}<i class="fa fa-camera-retro fa-2x"></i>{else}<i class="fa fa-home fa-fw fa-2x"></i>{/if} </td>
This is the thread lists tab still in the board template:
<td class="icon"> {if $[thread.is_new]}<i class="fa fa-camera-retro fa-2x"></i>{else}<i class="fa fa-home fa-fw fa-2x"></i>{/if}
And that was as much as I had time for changing at the time and then totally forgot about finishing any of the others. I used dumb font awesome's that didn't even make sense for on/off icons, so excuse them.
Edit: Of course you'll need the link that Font Awesome's provide and I put it in my wrapper template under the body tag.
<body>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
If I have time, I'll try to work out some of the others like the legend to match but I have a feeling the on/off may be the easy ones so might want to follow @khristian suggestion.
Ha, ha, I keep adding to this because I just worked out the part for the legend: Actually, hold off on doing the below. I think we may possibly need the {foreach that is there for the legend on other pages other than the home page but now I'm out of time to work on this anymore. In the home template replacing this table....
<table>
<tr>
{foreach $[legend]}
<td>$[legend.icon] <span>$[legend.name]</span></td>
{/foreach}
</tr>
</table>
with this....
<table>
<tr>
<td> <i class="fa fa-camera-retro fa-2x"></i> New Posts<i class="fa fa-home fa-fw fa-2x"></i> No New Posts
</tr>
</table>
I added non-breaking spaces after the </i> to move the New Posts/No New Posts over a bit.
|
|
Shady
New Member
Posts: 9
inherit
139701
0
Dec 2, 2016 12:02:02 GMT -8
Shady
9
April 2009
shadyrabbit
|
Post by Shady on Apr 15, 2016 12:19:14 GMT -8
Hello @khristian and Tumbleweed, Thank you both for the support. It's been years since I've been involved with HTML and CSS—but I've never gotten my feet wet when it came to Javascript until this week. It's been a lot of fun, and this helps immensely. At first I went about replacing each individual icon with a glyph, but I'm much happier with elli's solution above. |
|
