• 0
Sign in to follow this  
Followers 0

Issue referencing font awesome from external CSS


Question

Posted · Report post

I'm running into an issue trying to switch the list style on a generated list to a font awesome character. I've read all of the font awesome documentation and if I'm creating the list manually with the <i> tag everything works just fine. But when some other process is building the list I want to be able to edit those list items. I found an example to do that but reference to the font awesome character fails. 

 

I'm hoping someone here can help.

 

I found examples of how to do this here: 

http://stackoverflow.com/questions/13354578/custom-li-list-style-with-font-awesome-icon

and here

http://jaspreetchahal.org/using-font-awesome-icons-in-html5-lists/

 

both have almost exactly the same code so I'm guessing it's at least most correct.

 

However, when I try to apply this on my siteI just get the text f054 for the list items (so it's sort of working, just not the font awesome part). When I go back to the custom CSS screen the backslash has been removed. Not sure where to go from here, any help is appreciated.

 

.footer-nav {
  ul {
    list-style-type:none;
  }
  
  ul li:before {
    content: '\f054';
    font-family: FontAwesome;
    ;
    display: inline-block;
    width: 1.1em;
  }
}

 

Share this post


Link to post
Share on other sites

8 answers to this question

  • 0

Posted · Report post

We strip slashes from the code box as a precaution. Yes people do put javascript in the css box and vice versa ;)

 

Complicated code should be added properly via style.less or in the case of JS some kind of action/hook.

 

The CSS/JS boxes are there for snippets.

 

 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi,

 

Can you provide a link to your site please. 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Use 'PageLinesFont' as the font family unless you are adding font awesome using a 3rd party plugin.

Share this post


Link to post
Share on other sites
  • 0

Posted (edited) · Report post

I tried using the font family you mentioned but the problem still occurs. It seems to be to be an issue with the "conten:'\f054'" line. That line is being changed to just "content:'f054'" when i save and refresh. 

 

The site is http://simplify.bi

 

I've added the broken code back in so you can see what's happening.

 

I attached what the custom CSS window shows AFTER I save and refresh the page. You can see the backslash is removed.

 

[attachment=2052:css issue.png]

Edited by williamweber

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi there, I've just tested this, you're correct. The DMS control panel strips out the \

 

I'll report this for you.

 

If added via the base of customize theme in the style.css or style.less then it works.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

James B,

 

I'm still having the same issue you reported as you can see in this screenshot.  The leading slash is being stripped out.  Is there any update to this issue?

 

[attachment=2374:DMS-font-icon.jpg]

 

Thanks,

Wesley

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I've bumped the issue in our tracker and also mentioned a developer too. In the meantime you will want to use a child theme which shouldn't have this problem as long as you use the style.css or style.less file. You're free to use my child theme here - http://dannyholt.github.io/skeleton/

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks Danny!

 

Aside from the FontAwesome "\" getting stripped out... if I have the child skeleton theme activated, can I still make LESS changes to the Custom LESS/CSS DMS editor?

 

Or do I instead need to make all those styling changes to the style.less file itself?

 

I'm asking this question just as a general best practice guideline for using Child Themes.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0