Jump to content

Archived

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

umar

Font Awesome

Recommended Posts

umar    0
umar

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
umar    0
umar

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
quintinm    6
quintinm

batman, how do you insert font awesome into DMS2?

Share this post


Link to post
Share on other sites
quintinm    6
quintinm

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

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
quintinm    6
quintinm

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
GetMeWebDesign+    115
GetMeWebDesign

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


Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
quintinm    6
quintinm

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
GetMeWebDesign+    115
GetMeWebDesign

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?


Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
quintinm    6
quintinm

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
quintinm    6
quintinm

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
greenfly    230
greenfly

Thank you for the update 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
GetMeWebDesign+    115
GetMeWebDesign

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

  • Like 1

Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites

  • Similar Content

    • Barnaby Skinner
      By Barnaby Skinner+
      Hey all, hope I worded the topic correctly!
      I just need to know if either 1) I'm making a mistake or 2) this could be set as a new feature?
      Using the global settings typography parameters, I have a global paragraph font type (set using googlefonts) and have set the style to align:justify. When laying out <p> text inside a simple TEXT module, the <p> text adheres to both the font type and justification. Perfect.
      Now, when I set <p> text inside the PARAGRAPH TEXT field within an ELEMENT module, the <p> text adheres to the font type, but not the justification. It's rather annoying as I like to fully justify para text across the board and tend to use Element modules instead of text boxes for various reasons. It also seems silly that some PARAGRAPH TEXT fields adopt global settings, whilst other don't.
      Or I'm doing it wrong :S
      Any help or advice is much appreciated!
      Cheers
    • tforasiepi
      By tforasiepi+
      I'm taking a site out of development and putting it online.  I need a little help with the Framework 5 interface and icon links because they are not converting to the new URL.  The site is in a sub-folder and I followed the WordPress docs, like I usually do, about Giving Wordpress Its Own Directory . i.e.
      In Settings>General>Site Address changed it to the final URL Copied the index.php and .htaccess files to the root folder Edited the index.php to point to the subfolder and saved the file Now the site is up and running and I can still edit the theme in the Dashboard but the Framework 5 front end interface does not load on each page at the top.  In addition, the Social Media icons, slider icons, etc... don't show up.  However, they are linking to their destinations correctly.  I feel like I can missing a final step.  Can anyone suggest a resource or solution?
      The site is:  http://www.mnkhan.com/
      Thanks in advance!
       
    • John Olsson
      By John Olsson+
      Hello,
      I wondering (and custumers) when does Font Awesome 4.7 comes with an update of Pagelines?
    • Queue-it
      By Queue-it+
      Hi,
      I have the primary font family set to Arial. If I add another font (Open Sans), how do I change it only on a specific page? 
      I want to have Open sans only on one of my landing pages, but by default it will fetch Arial. Is there a way to change it without a plugin?
       

    • Skip
      By Skip+
      Hello
      I'm having problems with the Font not appearing correctly on a website.
      I've adjusted the font correctly with DMS (see screen shot) and saved it repeatedly yet it does not adjust the font in the website (see screen shot).  Would you please let me know what is wrong and should be done?
      (Please note that I've cleared the cache in the browser and whatnot as far as basic things I do know about browsers and issues with DMS from the past.  Hope this helps in troubleshooting...)
      Thank you.
      Skip


×