Jump to content
carlton

Using Short Codes as Images for Boxes

Recommended Posts

carlton

I am trying to use the Font Awesome short codes as images in my boxes.

 

<i class="icon-coffee"></i> icon-coffee

 

<span class="ibox-icon-border pl-animation pl-appear pl-contrast media-type-icon pla-group animation-loaded" style=""><i class="icon-3x icon-tablet"></i></span>

 

Thus far, I have tried pasting the short codes into the content editor, as well as the fields for Boxes Image and Boxes Custom Class.

 

Not sure what I'm missing here (other than an in-depth knowledge of CSS).

 

Thanks!

 

Share this post


Link to post
Share on other sites
carlton

All I want to accomplish here is to have something similar to the Pagelines demo.

I am using the Simplicitate theme flagstonesearchmarketing.com.

Right now, I have static images saved as Box Images, but I need to add new ones, and prefer Font Awesome.

Share this post


Link to post
Share on other sites
carlton

Yes, Content Box.

That's what I meant.

Unfortunately, tutorial doesn't explain how to get the demo's effect.

Share this post


Link to post
Share on other sites
Rob

Let us know that goes.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
carlton
It won't go anywhere. The pagelines documentation leaves a lot to be desired.

Share this post


Link to post
Share on other sites
Rob

Well, first, I don't think you can use font-awesome images for boxes.

 

That said, you can use them in the Grid System, which could be used in place of the boxes. 

 

How do you apply the Grid System?  I use a universal sidebar, and place a text widget in there.  Within the text widget, I create the grid and where an image should go, I have a grid row element.  That's where I put the shortcode for font awesome.


Former PageLines Moderator, Food Expert and Raconteur

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


  • Similar Content

    • yemoonyah
      By yemoonyah+
      Hi, even though I just got a SSL certificate, I can't get the green padlock to appear due to the following error:
      :A file with an insecure url of "http://yemoonyah.com/wp-content/plugins/pl-section-boxes/check.svg" was loaded via the javascript file: https://yemoonyah.com/wp-includes/js/jquery/jquery.js?ver=1.12.4 on line 3. The insecure URL may not be directly contained in the script file and may exist elsewhere."
      I figured if I delete and re-install the plugin it might fix the problem but will my boxes on the website still be there? Or do I have to redesign everything all over again if I delete the plugin and then re-install it?
    • 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....

    • webmktco
      By webmktco
      I'm trying to figure out how to update Font Awesome in DMS2. I know there's a WP plugin, but it doesn't totally fix the issue.
      Is there a way to either update the FA version or remove the snippet of code that uses the older FA version?
    • Audun MB
      By Audun MB+

      Here:http://attac.no/global-ulikhet/
      The images are forced into a boxed frame so that you can't see the whole picture. Doesn't look so good. Is this a bug? A feature? How can I fix it?
    • JudithKlinger
      By JudithKlinger+
      The recent WP update seems to be quite cheeky...messing about with a number of things. 
       
      Having trouble with boxes displaying differently in different browsers.  1st screen shot is Chrom...looks ok. 
      2nd screenshot is Firefox...colors are different. Icons are different. Have weird 1000's next to the icons. Any idea what's going on? 
       
      Thanks!! 
      Judith
       
       


×