How can I use a special Font awesome character instead of the text parameter with `link($text, $url, $attributes)?

I tried the following code for the Contact us button, but it doesn't show the envelope symbol properly. Instead, it shows #xf0e0;.

{{ link('', 'base:contact', { 'class':['fa', 'fa-lg'] }) }}`

Is there any way to output that symbol without using the fa-envelope CSS class?

  • but whatever i try i cant show "Envelope" character properly what exactly is properly? Does the character not show up at all? or??? – No Sssweat Jul 24 '16 at 22:20
  • Yes, character not show up at all and instead of to showing the "Envelope" symbol is shown it's value " . – Mojtaba Reyhani Jul 24 '16 at 22:54

If you are really set on not using the class (and want to use the unicode char) just don't use link(), the $text parameter is escaped. Just build a link normally:

<a href="{{ path('contact.site_page') }}" class="contact-us-link"><i class="fa fa-lg">&#xf0e0;</i></a>
| improve this answer | |
  • I'm not sure if fa class sets FontAwesome for the element itself, only the :before pseudo-element. – mradcliffe Jul 25 '16 at 20:01
  • 1
    fa applies to the element – Jeff Burnz Aug 2 '16 at 0:55

The point of the FontAwesome selectors is that you do not need to print out the Unicode equivalent for the character. FontAwesome usually works by adding a pseudo element before or after the HTML element using the class.

In this case, use the fa fa-envelope classes and optionally add in a class to hide the text with a text-indent or something.

{{ link('Contact Us', 'base:contact', { 'class':['fa', 'fa-envelope', 'fa-lg', 'contact-us-link'] }) }}
| improve this answer | |
  • Thank you so much for your Consultation, But is there any method that i can achieve this purpose without using "fa-envelope" Class. – Mojtaba Reyhani Jul 24 '16 at 23:53
  • @MojtabaReyhani what happens if you remove 'fa-envelope', in the above code? does it not work? – No Sssweat Jul 25 '16 at 2:11
  • @Sssweat Thank you for your attention, yes, by remove the 'fa-envelope' class, in the above code, it does not work and doesn't show envelope symbol. – Mojtaba Reyhani Jul 25 '16 at 8:00
  • Why do you not want to add the fa-envelope class. That is exactly how you are supposed to use FontAwesome. If you want to do /not/ use that class, then you have to reconstruct the CSS that is already written for you. It is completely duplicate code to not use that class. – mradcliffe Jul 25 '16 at 14:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.