Jump to content

Archived

This topic is now archived and is closed to further replies.

williamweber

Issue referencing font awesome from external CSS

Recommended Posts

williamweber    8
williamweber

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
Danny    1,327
Danny

Hi,

 

Can you provide a link to your site please. 


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Simon    247
Simon
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
williamweber    8
williamweber

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]

Share this post


Link to post
Share on other sites
James B    436
James B

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.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
wesleymusgrove    0
wesleymusgrove

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
Danny    1,327
Danny

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/


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
wesleymusgrove    0
wesleymusgrove

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
Simon    247
Simon

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

  • Similar Content

    • gregbroxton
      By gregbroxton+
      The Font Awesome 'Brand icons' do not render on the mobile version of this site.
      The other Font Awesome icons render fine, but the "Brand icons" do not render at all when viewed on mobile.
      Everything works normally when viewed on the PC.
      Any ideas why the brand icons will not render in the mobile version?
      The site is using DMS2 with all updates
      gregbroxton.com
    • bartoncollege
      By bartoncollege
      I was perusing the master list of Font Awesome icons at http://fortawesome.github.io/Font-Awesome/icons/ and noticed that there are many new ones that are not available in iBox's dropdown menu.  Will these be added in the next DMS update?
      Thanks.
      Ken.
    • abuzzelli
      By abuzzelli+
      Trying to display social icons in the footer of http://brkichdesign.com/NewSite/. All are working but yelp. It's right after the pinterest icon, it's there but not showing up. Any ideas why?
    • webmktco
      By webmktco+
      Website URL: http://www.schrumpfdds.com/
      Framework Version: DMS 1.1.9
      WordPress Version: 4.1.1
       
      I noticed that the Font Awesome version in my theme is 3.2.1.
       
      Can you tell me how I can update the FA version? Or is that not possible?
    • webmktco
      By webmktco+
      I can't get the Yelp icon to display.  It seems my development site has an older version of Font Awesome (according the FA developer).
       
      How can I update FA to the most recent version?
       
      WordPress Version
      4.0.1
      Framework Version
      2.1.9.1
      PHP Version
      5.4
      http://forsythdentalpartners.myddsdev.com/  

×