Jump to content

Archived

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

ingo68

How to change the colors in Font Awesome

Recommended Posts

ingo68

hello,

 

i am using Font Awesome icons with the CSS Prefix <fa> and <i> 

How can i change the colors of them?

 

Share this post


Link to post
Share on other sites
Danny

Hi,

 

You will need to use CSS for example, your typical icon code will look like this:

 

<i class="fa fa-home"></i>

 

However, you can use either inline styling like so:

 

<i class="fa fa-home" style="color: red;"></i>

 

Which will give you a red icon or you can use CSS in the form of either DMS classes such as

 

<i class="fa fa-home text-error"></i>

Which will give you a reddish color similar to our red buttons color. For more information on these classes, see here - http://docs.pagelines.com/tutorials/typography

 

You can also add your own CSS such as:

 

.white-txt { color: #fff; }

.blue-text { color: #3498db; }

.red-text { color: #e74c3c; }

.green-text { color: #2ecc71; }

.yellow-text { color: #f1c40f; }

.orange-text { color: #e67e22; }

.purple-text { color: #9b59b6; }

 

Then add the class name to your icon code like so:

 

<i class="fa fa-home blue-text"></i>

 

The color codes were taken from here - http://flatuicolors.com/


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Danny

No problem.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
ingo68

why does not work the icon bus?

<i class="fa fa-bus"></i>

Share this post


Link to post
Share on other sites
Danny

The bus icon is from Font Awesome 4.2, DMS currently uses 4.1, so the icon will not work as it is currently not available in DMS. Font Awesome has been updated in our repo and will be included in an upcoming update.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
ingo68

thank you Danny for fast answering. I will still wait until the update.

Share this post


Link to post
Share on other sites

  • Similar Content

    • gregory.guz
      By gregory.guz+
      Hi ,
      I just noticed that the color picker has stopped showing up on my PL5 site ( please see attached image ) 
      Any idea what could be causing the problem?
       
      Thanks 
      Greg

    • stijnxo
      By stijnxo+
      I used the following code in a TextBox:  <a href="http://bookpage.html">BOOK NOW</a> <i class="fa fa-cart-arrow-down fa-lg"></i>
      But the fa icons are not showing up next to the BOOK NOW text in the fixed top right corner. See website: http://campmoonrise.nl/book-now/
      See code screenshot....

    • Dan Haddock
      By Dan Haddock
      DMS: Latest Version
      Running a Child Theme
      Wordpress: 4.8.3
      Plugins:
      Akismet Anti-Spam 
      Coming Soon Page & Maintenance Mode by SeedProd
      Contact Form 7
      Cookie Law Info
      DMS Professional Tools    
      Enhanced Media Library
      Flamingo
      Google Analytics for WordPress by MonsterInsights
      Google XML Sitemap    
      Jetpack by WordPress.com
      Legull
      Loginizer   
      MailChimp for WordPress
      PageLines Updater
      Really Simple SSL
      Schema App Structured Data
      Sucuri Security - Auditing, Malware Scanner and Hardening  
      Uber reCaptcha
      Yoast SEO
      Problem Below
      Hi Team,
      I am looking to style the Continue Reading Button with the PHP you provided in an earlier ticket here: 
       
      I put the PHP code into my site, however I do not get my Icon back, I just get back Read More >>
      I have attached a screenshot of the code in place on my site along with the output.
      Interested to know what I may be doing wrong? - I am very new to PHP so a bit apprehensive on this.
      The Images: https://drive.google.com/open?id=0B0i4JJXa2jdQN2xoakZNRUdmaU0
      Let me know if you need any more information from me.
       
    • greatthingsllc
      By greatthingsllc+
      In Platform 5, Using Framework Section for Content , I have set the hyperlink colors in the CUSTOMIZE section.   However, none of the pages are properly displaying the link colors.   Just defaulting to black, and underline on hover.   I did not see where this would be controlled at the page level or lower
      Site    doritbrauer.com
      Thanks
      Josh

    • jagipson
      By jagipson+
      Should be a simple answer but not sure why its not doing this.  I have a child theme installed on pagelines 5 that has a hook so it will write over the theme css. Strange is that when I am on the frontend the code works but in the dashboard your theme takes over my code and its no where to be found. See examples attachments
      @Andrew @Danny


×