Jump to content


Photo
- - - - -

Font Awesome

icons font awesome

Best Answer quintinm , 29 May 2014 - 01:18 PM

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...

Go to the full post


  • Please log in to reply
15 replies to this topic

#1 umar

umar

    Newbie

  • Members

  • 6 posts
  • LocationIndia
  • Framework Version:WP
  • Country: Country Flag

Posted 08 April 2014 - 06:27 PM

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.

 

 



#2 batman

batman

    Bat Learning

  • Members

  • 2202 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 08 April 2014 - 10:13 PM

Hi @umar

Please, you can see this

http://fortawesome.g...-Awesome/icons/

Now you have the Font Awesome 4.0.3 at DMS 2



#3 umar

umar

    Newbie

  • Members

  • 6 posts
  • LocationIndia
  • Framework Version:WP
  • Country: Country Flag

Posted 09 April 2014 - 04:05 AM

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. 



#4 quintinm

quintinm

    Super Member

  • Members

  • 201 posts
  • Framework Version:DMS2
  • Country: Country Flag

Posted 22 May 2014 - 01:55 PM

@batman, how do you insert font awesome into DMS2?



#5 batman

batman

    Bat Learning

  • Members

  • 2202 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 22 May 2014 - 09:13 PM

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.pageline...ls/font-awesome



#6 quintinm

quintinm

    Super Member

  • Members

  • 201 posts
  • Framework Version:DMS2
  • Country: Country Flag

Posted 23 May 2014 - 07:43 AM

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.



#7 quintinm

quintinm

    Super Member

  • Members

  • 201 posts
  • Framework Version:DMS2
  • Country: Country Flag

Posted 23 May 2014 - 07:47 AM

Hi @batman - i think i got it.

I added these two links to the header scripts:

<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">

 

Seems to be dispaying correctly.

 

thanks.



#8 Danny

Danny

    Is Awesome!

  • Moderators
  • 17595 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 23 May 2014 - 12:33 PM

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.



#9 quintinm

quintinm

    Super Member

  • Members

  • 201 posts
  • Framework Version:DMS2
  • Country: Country Flag

Posted 28 May 2014 - 10:28 AM

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?



#10 GetMeWebDesign

GetMeWebDesign

    Advocate

  • Members

  • 524 posts
  • LocationSurrey, UK
  • Framework Version:developer
  • Country: Country Flag

Posted 28 May 2014 - 10:46 AM

@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



#11 quintinm

quintinm

    Super Member

  • Members

  • 201 posts
  • Framework Version:DMS2
  • Country: Country Flag

Posted 28 May 2014 - 11:24 AM

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.

}



#12 GetMeWebDesign

GetMeWebDesign

    Advocate

  • Members

  • 524 posts
  • LocationSurrey, UK
  • Framework Version:developer
  • Country: Country Flag

Posted 28 May 2014 - 11:42 AM

I am being dim but what is icon-ok, what is icon-li? Are you using current Font awesome 4.1 http://fortawesome.g...-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?



#13 quintinm

quintinm

    Super Member

  • Members

  • 201 posts
  • Framework Version:DMS2
  • Country: Country Flag

Posted 29 May 2014 - 01:07 PM

@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...



#14 quintinm

quintinm

    Super Member

  • Members

  • 201 posts
  • Framework Version:DMS2
  • Country: Country Flag

Posted 29 May 2014 - 01:18 PM   Best Answer

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...



#15 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 29 May 2014 - 03:10 PM

Thank you for the update 



#16 GetMeWebDesign

GetMeWebDesign

    Advocate

  • Members

  • 524 posts
  • LocationSurrey, UK
  • Framework Version:developer
  • Country: Country Flag

Posted 29 May 2014 - 05:45 PM

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; )


  • greenfly likes this





Also tagged with one or more of these keywords: icons, font, awesome