Using font awesome

[thisisedy]

Hi ! I am trying to use font awesome [nofollow] with smf buttons . There is a tutorial about using it in smf main menu , but i'm trying to add FA to topic/post buttons .

I've used a 'workaround' solution , inserting the font tags via translate file :

Code Select Expand


$txt['new_topic'] = '<i class="fa fa-plus-circle"></i>  New Topic';
$txt['set_sticky'] = '<i class="fa fa-star"></i>  Set topic sticky';

It's getting parsed in forum view , but the page title when creating a topic will be <i class="fa fa-plus-circle"></i>  New Topic    . So , is there a solution to this ? Maybe editing some source file ? Using SMF 2.0.7 

[margarett]

You should edit the template files *and* add the necessary classes to CSS files.
(not that I'm any kind of theming expert, though...)

[thisisedy]

Can you please specify the template file which handles those buttons ? Thanks 

MessageIndex.template has :

Code Select Expand

// Create the button set...
$normal_buttons = array(
'new_topic' => array('test' => 'can_post_new', 'text' => 'new_topic', 'image' => 'new_topic.gif', 'lang' => true, 'url' => $scripturl . '?action=post;board=' . $context['current_board'] . '.0', 'active' => true),

No needs for css , just to add those <i> tags before the actual button text . http://fortawesome.github.io/Font-Awesome/examples/ [nofollow]

[Herman's Mixen]

normal wise is that you insert the extra CSS file into your index.template.php and Customize your index.css file to meet the requirements of the font in example when you make changes to the body add something like this.... 

Code Select Expand


font-family: 'FontAwesome';



Also make sure that you uploaded the files you need to the right folders !!

[margarett]

You don't use "i" tags anymore, that's deprecated. You use CSS classes

[thisisedy]

Yup , didn't read all the docs there . Apparently i can use pseudo classes :before or :after to add the icon altering just the css file

Thanks for the help 

[RubberDucky]

Yup , didn't read all the docs there . Apparently i can use pseudo classes :before or :after to add the icon altering just the css file

Thanks for the help 

I am just beginning to learn html/css and this :before and :after has confused me ever since I started learning CSS. I can understand basic CSS like modifying text and floating things right or left, but where can I read about :before and :after to get a better grasp of this?

[AllanD]

I am just beginning to learn html/css and this :before and :after has confused me ever since I started learning CSS. I can understand basic CSS like modifying text and floating things right or left, but where can I read about :before and :after to get a better grasp of this?

I was looking at it myself, and found this site the helped explain it a lot.  http://krasimirtsonev.com/blog/article/CSS-before-and-after-pseudo-elements-in-practice