This module is not picking up the module css styles when using fontawesome. It requires an additional icon class for it to pickup the stylings. There is nowhere to add this. I have tried adding 'icon fa' in the display settings for the field but it doesnt work. It only picks up 'fa', but thats not enough to get the module stylings. It works fine however with glyphicons on bootstrap but unfortunately there are no social media icons in the icon list.

CommentFileSizeAuthor
#4 Screen Shot 2015-03-22 at 16.52.39.png104.33 KBAnonymous (not verified)

Comments

Anonymous’s picture

Anonymous (not verified) commented 
    $element['#attributes']['class'][] = 'linkicon__icon';
    $element['#attributes']['class'][] = 'icon';
    $element['#attributes']['aria-hidden'] = 'true';
    $icon = '<span ' . drupal_attributes($element['#attributes']) . '></span>';

This is the code I think. The first class is coming through as is aria-hidden and the drupal attributes, its just not bringing through the second icon class for some reason.

Anonymous’s picture

Anonymous (not verified) commented

If I add this array

'attributes' => array('class' => array('icon')),

to 

    $icon_vars = array(
      'bundle'     => $element['#icon_bundle'],
      'icon'       => $icon_name,
      'attributes' => array('class' => array('linkicon__icon')),
    );

Then it works. Im not sure if its broken something else though.

gausarts’s picture

gausarts commented
Status: Active » Postponed (maintainer needs more info)

Sorry, it is not clear what you did, and how can I reproduce it.

Is the issue about "CSS icon not being rendered", or the "Linkicon module CSS" not picked up?

Please help me re-produce it by providing more info:
1. Please provide screenshot of your Formatter settings when it failed.
2. Are you using it with "icon" module? Or "fontawesome" module? Sounds you are using "icon" module?
3. What did you put in "Icon prefix class" text field option?

I have tried adding 'icon fa' in the display settings for the field but it doesnt work.

Normally fontello archive adds "icon-" prefixes even with fontawesome.
And fontawesome archive itself adds "fa-" prefixes. So you may have to add proper prefixes accordingly.
You can view the source of the font CSS file to determine actual prefixes.

In the "Icon prefix class" text field option, you will input either "fa" or "icon" without hyphen ("-").
Adding "icon fa" will obviously fail ;)

It only picks up 'fa', but thats not enough to get the module stylings.

if you meant Linkicon stylings, you have to check "Allow linkicon to provide CSS assets" option. And it should just work, unless I missed your point, and there is an actual bug I am not aware of.

At all cases, your info to re-produce it will be quite helpful.

Anonymous’s picture

Anonymous (not verified) commented
StatusFileSize
new Screen Shot 2015-03-22 at 16.52.39.png104.33 KB

OK, so i installed the module, have bootstraph glyphicon and fontawesome icon libraries. So I go into the field display on the content type and add the appropriate icon prefix, to keep it simple I used fontawesome, so according to the instructions I added 'fa', and then the required size of icon and colour. I added a node of that content type and included the required icon, for example 'facebook'. So in theory that should be 'icon fa-facebook' in the css. When I looked at the node it was just a small blue icon that comes out of the box with fontawesome - no colour or size stylings. When I went to see what was going on using Firebug it was missing the icon class, so if i manually entered the icon class into the html, something like icon fa fa-facebook', in Firebug then my icon rendered as expected. I thought maybe I could fix it by adding 'icon' alongside 'fa' in the display settings for the field but it obviously doesn't pick up multiple classes for the field, as you say in your reply.

So i added this array to your module

'attributes' => array('class' => array('icon')),

And then i could see the different sizes and colours in the display settings as per the images on the module project page and then the icon showed up as expected on the node.

I have attached the settings I have used on the display.

gausarts’s picture

gausarts commented

Thank you.

That "icon" class was not needed, because them_icon has already provided it.
However I am not sure about the latest change at icon.module.

In such cases, it sounds like was-working-before-then-not thing ;)

You can try adding the classes if you want to see the styling intact before removing "linkicon_icon" class as you said:
'attributes' => array('class' => array('linkicon_icon', 'icon')),

Once it is confirmed okay, and I may integrate it if the icon module has removed it.

I also found recent issue with icon module:
https://www.drupal.org/node/2434441

I haven't got a chance to investigate more, but sounds something broken recently.

In the meantime, I can only recommend putting the path to CSS file directly via your theme, or the linkicon module textfield option till we figure out the actual issue. And disable icon.module integration for now.

Feel free to update if you find anything.

gausarts’s picture

gausarts commented
Title: FontAwesome doesnt pickup module styles » Broken integration with FontAwesome 2x via icon module

It should work fine for linkicon and fontawesome alone if you disable icon module integration.

However I did check that the class icon is not being passed anymore from theme_icon module. Perhaps the removal of html_tag from the latest Fontawesome module in the above mentioned issue has disabled theme_icon preprocess, and uses the new theme_icon_sprite which doesn't pass the "icon" class.

Feel free to provide a patch with your mentioned solution for your credit. Thanks.

  • gausarts committed fbe0f97 on 7.x-1.x 
    Issue #2453995 by derek smalls: Broken integration with FontAwesome 2x...
gausarts’s picture

gausarts commented
Status: Postponed (maintainer needs more info) » Fixed

It is in DEV. Feel free to re-open if still an issue. Thanks.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.