queue  5
support
Results 1 to 4 of 4

Thread: List of available icons and using icons as bullet points

  1. #1
    Junior Member
    Join Date
    Jan 2014
    Posts
    23

    List of available icons and using icons as bullet points

    Hi all,

    We'd like to use icons for bullet points on our home page. I have two questions:

    1. Where can I find a list of available icons? At the moment I have just guessed them but I can't find the ones I'm hoping to use (e.g. bullhorn and gbp)

    2. Can they be aligned with the text? When I insert them using HTML, as per the attached example, they sit higher than the text that follows.

    Thanks for your help.


  2. #2
    Administrator Donagh's Avatar
    Join Date
    Aug 2011
    Posts
    1,946
    Hi, the theme uses font awesome, you can see the icon class names here: http://fontawesome.io/cheatsheet/ The theme uses an older version of the font so some of the latest icons may not be available. Regarding the icons sitting higher, I'll need to see your site to advise on that. Can you share your url?

  3. #3
    Junior Member
    Join Date
    Jan 2014
    Posts
    23

    Inserting Font Awesome Icons

    Thanks for the reply and sorry I missed it, forgot to set an email notification.

    The URL is
    ** Hidden Content: You don't have sufficient privileges to see this hidden data **
    and I'm trying to put them into the text at the top of the homepage (under the main banner).

    Could you tell me how to actually insert an icon? I've tried to add the shortcode and also insert HTML as text but nothing is showing up on the site.

    Many thanks
    Kitty

  4. #4
    Administrator Donagh's Avatar
    Join Date
    Aug 2011
    Posts
    1,946
    Hi, Try this:

    Paste this into the Custom CSS field in the theme options panel:

    Code:
    .pe-view-layout-block-104 div p:nth-child(1)::before {
        content: '\f309';
        font-family:"entypo-icon-font";
        color:#ffff00;
        margin-right:10px;
    }
    .pe-view-layout-block-104 div p:nth-child(2)::before {
        content: '\f309';
        font-family:"entypo-icon-font";
        color:#ffff00;
        margin-right:10px;
    }
    .pe-view-layout-block-104 div p:nth-child(3)::before {
        content: '\f309';
        font-family:"entypo-icon-font";
        color:#ffff00;
        margin-right:10px;
    }
    .pe-view-layout-block-104 div p:nth-child(4)::before {
        content: '\f309';
        font-family:"entypo-icon-font";
        color:#ffff00;
        margin-right:10px;
    }
    The above is 4 separated css snippets, one to target each of those 4 sentences. It inserts an icon at the beginning of each one. The icon which is inserted is determined by this part: "content: '\f309';" Basically the '\f309' is a code for a particular icon (twitter icon in this case). You will need to replace this part of each snippet above. To find the code for other icons check in the theme!s main folder, then in the css folder, then open the file called "entypo-icon-font.css" all icons class names and associated codes will be found in there.