• 0

Font Awesome


Question

Posted · Report post

Hi,

 

I have recently purchased the DMS2 and I am trying to configure new theme.

 

I have installaed and actived my new purchased dms2 theme on the staging but the font awesome icons are missing.

 

 

Share this post


Link to post
Share on other sites

15 answers to this question

  • 0

Posted · Report post

Ok, i think i might have solved it - the code is now different based on what font awesome's website says.

 

Instead of this:

<ul class="icons-ul">
<li><i class="fa fa-check""></i> Hidrostal (D100M) 18.5kW - 380Volt</li>
</ul>

It should be this:

<ul class="fa-ul">
	<li><i class="fa-li fa fa- icon-ok"></i> Hidrostal (D100M) 18.5kW - 380Volt</li>
</ul>

seems to work...

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Actually the font awesome icons are missing when I uploaded the theme to my staging version. I first tried it on my local machine and it works. 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

batman, how do you insert font awesome into DMS2?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi quintinm

You can use this

<i class="fa fa-reddit-square"></i> fa-reddit-square

Please, you take a look to this

http://docs.pagelines.com/tutorials/font-awesome

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi batman, what codes do i need to insert in the "DMS Header Scripts Fallback" area to enable font awesome?

I know i can buy the font awesome shortcode plugin, but at this stage i dont want to spend the $14.99 as i am buying loads of plugins / sections as well as the DMS club membership in the last 2 weeks.

 

How do i do it manually?

 

Thank you.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

You do not need to include any script into the DMS Header Scripts Fallback to enable Font Awesome, please remove this code immediately as it will likely cause a conflict. DMS already has Font Awesome included, as Batman mentioned above, all you need to do is add the icon code to wherever you wish to display an icon.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Danny, i just did that and the icons no longer show up.

I do not have any of the DMS plugins to handle font-awesome, just doing it by hand.

 

Any ideas?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

quintinm With the exception of the iBox section, where you can select teh Font Awesome, you have to add them manually

 

Alternatively, if you only use a few, you could create your own shortcodes

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi GetMeWebDesign, thaks for the info.

 

I have used them in the content loop on the page like this and after removing the links i had in the "DMS Header Scripts Fallback" area they now show as a normal list.

<ul class="icons-ul">
	<li><i class="icon-li icon-ok"></i> Hidrostal (D100M) 18.5kW - 380Volt</li>
	<li><i class="icon-li icon-ok"></i> Robot (RW4021BJ-V) 5kW - 380Volt</li>
	<li><i class="icon-li icon-ok"></i> 80KZN43.7 (3,7kW - 380Volt)</li>
	<li><i class="icon-li icon-ok"></i> 100KZN45.5 (5.5kW - 525Volt)</li>
	<li><i class="icon-li icon-ok"></i> Tsurumi (22CE4) 2,2kW - 380Volt</li>
	<li><i class="icon-li icon-ok"></i> Flygt (CP3152MT) 15kW - 380Volt</li>
	<li><i class="icon-li icon-ok"></i> Flygt (CP3127MT) 5,9kW - 380Volt</li>
	<li><i class="icon-li icon-ok"></i> Flygt (CP3102MT) 3.2kW - 380Volt</li>
	<li><i class="icon-li icon-ok"></i> HCP (AL-21) 0.75kW - 220Volt</li>
	<li><i class="icon-li icon-ok"></i> HCP (AL-32) 1,5kW - 380Volt</li>
</ul>

I also have this in the CSS in case that is the issue?

.the-icons {
margin-left: 0;
list-style: none;

I am not sure what else i am supposed to be doing to make them display.

}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I am being dim but what is icon-ok, what is icon-li? Are you using current Font awesome 4.1 http://fortawesome.github.io/Font-Awesome/icons/. Your code should look something like this:

 

<ul class="icons-ul">
<li><i class="fa fa-check""></i> Hidrostal (D100M) 18.5kW - 380Volt</li>
<li><i class="fa fa-check"></i> Robot (RW4021BJ-V) 5kW - 380Volt</li>
<li><i class="fa fa-check""></i> 80KZN43.7 (3,7kW - 380Volt)</li>
....
</ul>

 

What is that custom LESS supposed to be doing and how are you applying it?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

GetMeWebDesign - i am also a bit confused by all this to be honest.

Maybe explain to me what i am supposed to be doing.

 

As i understand it, font awesome icons are built into DMS2 and all i need to do is add the code as you provided it.

<ul class="icons-ul">
<li><i class="fa fa-check""></i> Hidrostal (D100M) 18.5kW - 380Volt</li>
</ul>

But when i do that i get the usual list dots and then a box where i assume the icon would be - see here: http://screencast.com/t/hoB6DMg8wRc9

 

The documentation says for bulletted lists i should be using this code:

    <ul class="icons-ul">
    <li><i class="icon-li icon-ok"></i>Bulleted lists (like this one)</li>
    <li><i class="icon-li icon-ok"></i>Buttons</li>
    <li><i class="icon-li icon-ok"></i>Button groups</li>
    <li><i class="icon-li icon-ok"></i>Navigation</li>
    <li><i class="icon-li icon-ok"></i>Prepended form inputs</li>
    <li><i class="icon-li icon-ok"></i>&hellip;and many more with custom CSS</li>
    </ul>

this doesn't work either - all it does is to remove the block to the right of the bullet in the above screengrab.

 

In the documentation it also says i need to add this to my CSS

    .the-icons {
    margin-left: 0;
    list-style: none;
    }

Doesn't seem to do anything.

 

When i add this code to the DMS header fallback script the icons show, but the bullets are also there.

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome-ie7.min.css" rel="stylesheet">

Should i be doing anything else, i dont know what i am doing wrong...

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thank you for the update 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Apologies... I used my code in a PLNextBox where the Wordpress Auto p filter wasnt checked, hence no bullet (changes default list-style disc; to list-style: none; )

1 person likes this

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