Forums

Feature Icons

Permalink
Good day all,

Is there a way to get more icons that the black and white icons shown on the Feature block icons?

I'm getting the feeling that these are not just icon images I could download some and drop them in a folder, and instead they may be font related. Is there anyway to customize them with additional or colorful icons?
 
MrKDilkington replied on at Permalink Reply
MrKDilkington
Hi ShawnPConroy,

The icons you see are font awesome icon fonts. They are font characters that can be styled like regular text with CSS.

Example:
div.ccm-page div.feature-home-page div.ccm-block-feature-item i {
color: red; 
font-size: 1.3em;
top: 1px;
}

- this makes all the feature icons red

Every icon gets two classes. The first class is the .fa (font awesome class) and the second class is the name of the icon. You can use the name of the icon to style it individually. 
<i class="fa fa-pencil"></i>


Example:
div.ccm-page div.ccm-block-feature-item .fa-eye::before {
content: "\f06e";
color: red;
}

- this would make the eye red

div.ccm-page div.ccm-block-feature-item .fa-eye::before {
content: "\f06e";
color: purple;
line-height: 48px;
}
div.ccm-page div.ccm-block-feature-item i.fa-eye {
    text-align: center;
    height: 50px;
    width: 50px;
    background: lightblue;
    border-radius: 50%;
}
div.ccm-page div.ccm-block-feature-item i.fa-eye {
position: absolute;
top: 0px;
Viewing 15 lines of 17 lines. View entire code block.

- this makes the eye purple, the background lightblue, and makes it round

http://imgur.com/a/VuW9Y

You can also add background colors and border-radius to icons.
http://codepen.io/ameyraut/pen/yfzog...