Skip to main content

When you are adding a custom header, footer, widget or page, you may want to make use of the built-in CSS utility classes in Crowdstack. This should make your coding much easier. I'll break them down by classes native to Foundation, which is the responsive framework Crowdstack uses, and those that are built into Crowdstack.

Foundation CSS Classes

.text-right : equivalent to text-align:right

.text-left : equivalent to text-align:left

.text-center : equivalent to text-align:center

.flex-video : used to make an embedded video (eg,YouTube) responsive CSS Classes

.small-font : equivalent to font-size:0.85rem

.tiny-font : equivalent to font-size: 0.75rem

.uppercase : equivalent to text-transform:uppercase

.bold : equivalent to font-weight:bold

.underline : equivalent to text-decoration:underline

.upsize : equivalent to font-size: 1.2rem

.margin-bottom-10 : equivalent to margin-bottom:10px

.margin-bottom-20 : equivalent to margin-bottom:20px

.line-item : equivalent to margin-bottom:7px

.margin-left-5 : equivalent to margin-left:5px

.margin-right-5 : equivalent to margin-right:5px

.hide : equivalent to display:none

.full-width : equivalent to width:100%

.align-middle : equivalent to vertical-align:middle

Other Things To Remember

Font Icons

We use Font Awesome for our font icons, so you can freely reference any Font Awesome icons in your own code.

Responsive Grids and Visibility

We use Foundation's grid system to handle all of our responsiveness. Thus, if you are ever looking to add a responsive element, you should read up on their grid system:

And a key component of responsiveness, especially for more advanced designs, is "visibility", which allows you to show/hide page elements depending on the size of the grid. More on Foundation's visibility classes here:

A complete list of Foundation's utility classes can be found here:

I hope this helps!

Ted @ Crowdstack
Last edited by Ted @ Crowdstack
Original Post

Replies/Updates (5)

Hi, Ted.

Font Icons

We use Font Awesome for our font icons, so you can freely reference any Font Awesome icons in your own code.

I just installed UNICODE 9.0 fonts so I could use this symbol.   

And later I found your post above.

I went to Font Awesome

and used the instructions that said to use this code 

<i class="fas fa-power-off"></i>

When I do that, I get

 and trying the same code here in this message the html editor in this windows strips out the code and it won't render.

What am I doing wrong.






Images (2)
  • mceclip0
  • mceclip1

Let me see if I can get this to work in the wysiwyg editor:

This is a test  

Which definitely works. I think that the issue you are having is that you are trying to use the fas class, which I'm not sure is available in Font Awesome 4.7 (the version we are currently using in Crowdstack). We have plans to upgrade this in an upcoming release.

Next, since the WYSIWYG does not have Font Awesome icon support built directly into it you will need to use the "Source code" option on the far right to edit the posts HTML and manually insert the icon using code like this:

<span class="fa fa-power-off">&nbsp;</span>

That is what I used above, and it appears to work just fine.

After Edit Notes:

Okay, thanks to the WYSIWYG massaging of the HTML this actually did end up requiring a bit more work to massage it into something the editor would not mangle. First, the element has to have something inside of it for the WYSIWYG to not strip it out and replace it with double BRs. Second, I needed to include other words either before or after it in order for it to not massage the classes into the paragraph and drop the span. Third, I had to use a span instead of a "i" since the WYSIWYG would not only strip the i out if it was the only HTML, but would apply a "style='font-style: italic;'' attribute to the paragraph.

Bottom line, it seems you are better off using image icons in your posts instead of trying to rely on font icons at this time. It can be done, as I showed above, but because of how the WYSIWYG likes to massage the HTML when it's posted it can be a tiresome process requiring a lot of iterations to get it to look right.

Hope this helps!

Jonmark @ Crowdstack
Last edited by Jonmark @ Crowdstack

Add Reply

Link copied to your clipboard.