0
Welcome Guest! Login
0 items Join Now

How do I start using the Font Awesome Collection

Last Post
Search Topic

  • Re: How do I start using the Font Awesome Collection

    Posted 8 years 6 months ago
    • MrT wrote:
      No that is not how to do it... use the fontawesome classes... http://fortawesome.github.io/Font-Awesome/3.2.1/cheatsheet/ 
      <span class="icon-comment icon-5x"></span>

      Also, stop copying and pasting from microsoft word too. That is what is adding all that redundant "msonormal" type classes that do nothing on a website.

      Regards, Mark.

      I always copy from Edit Text as plane text. The secure page code was copied from the Joomla administrator code page. Sorry about that.
      The
      <span class="icon-comment icon-5x"></span>
      works great. Thank you! However, there is a new issue. The larger icons are running into the paragraphs.
      This image is hidden for guests.
      Please log in or register to see it.
    #1242119
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Re: How do I start using the Font Awesome Collection

    Posted 8 years 6 months ago
    • Could you please post a URL to your site (this can be done in the secure area tab if you prefer) so we can look for you. Without a link to page where the problem is on your site it is quite hard for us to provide the best solution due to so many variables. We try to provide file names and line numbers for code changes and if changes have already been made then our advice may be incorrect.

      Give me a direct link to the page with the issue.

      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
    #1242123

  • Re: How do I start using the Font Awesome Collection

    Posted 8 years 6 months ago
    • MrT wrote:
      Could you please post a URL to your site (this can be done in the secure area tab if you prefer) so we can look for you. Without a link to page where the problem is on your site it is quite hard for us to provide the best solution due to so many variables. We try to provide file names and line numbers for code changes and if changes have already been made then our advice may be incorrect.

      Give me a direct link to the page with the issue.

      Regards, Mark.

      Hey Mark,
      I have attached the URL to the website via the Secure form.
      Thank you for your help.
    #1242138

  • Re: How do I start using the Font Awesome Collection

    Posted 8 years 6 months ago
    • I've been working with it more but the upper text always is misaligned with the rest of the body/copy.
      This image is hidden for guests.
      Please log in or register to see it.
    #1242241
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Re: How do I start using the Font Awesome Collection

    Posted 8 years 6 months ago
    • The first title is not centralised because of the print and email icons so...

      Use this code...
      article .actions {
    position: absolute;
    right: 0;
    top: 30px;
}

      to add more space around the icon...
      article [class^="icon-"]::before, article [class*=" icon-"]::before {
    margin-top: 15px;
    margin-bottom: 15px;
}

      You've use strong tags on the % so you can change the font-size of those like this...
      article p strong {
    font-size: 24px;
}

      This is how to create a custom CSS compatible with Gantry 4...

      Simply create a file called "<TEMPLATENAME>-custom.css" and put this file in the CSS folder of the template (where <TEMPLATENAME> is the name of the template as seen in template manager e.g. rt_iridescent would be rt_iridescent-custom.css). GANTRY4 will automatically load this CSS file. If you wish, you can also have browser specific files by appending, for example, "-ie9" making the filename "<TEMPLATENAME>-custom-ie9.css"

      New questions = new topics now please to be fair to other members.

      Learn to use either, Firebug in Firefox, or Chrome Developer Tools in Chrome, they will save you hours on things like this and they're very easy to use.


      Regards, Mark.

    • The following users have thanked you: Ari Erdfarb

    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
    #1242343

  • Re: How do I start using the Font Awesome Collection

    Posted 8 years 5 months ago
    • Hi Mark
      This CSS is working, however it's changing strong tags on all the other pages as well. I need to change the strong tags only one the one page needed.

          article p strong {
        font-size: 24px;
    }


      Thank you again for your help.
    #1245271
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Re: How do I start using the Font Awesome Collection

    Posted 8 years 5 months ago
    • Change that to:
      .menu-data-success article p strong {
    font-size: 24px;
}

      That will then only make it apply to the menu item with alias "data-success".

      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
    #1245471

Time to create page: 0.058 seconds