Okay
  Public Ticket #1602349
Change icon weight
Closed

Comments

  •  1
    Simon started the conversation
    June 7, 2018 at 4:32pm

    Hello Salient

    I would like to take the portfolio previous and next arrows and the portfolio "all items" button bolder. The site seems to be using the 'thin' versions of the Fontawesome icons. 

    Would it be possible to give me some CSS to use the normal (or bold if available) icons?

    Thank you!

    Simon

  •  9,006
    Tahir replied
    June 8, 2018 at 10:44am

    Hey Again,

    You can adjust these css selectors .

    Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):

    .icon-salient-back-to-all:before {
    content: "\e005";
}
.icon-salient-left-arrow-thin:before {
    content: "\e007";
}
.icon-salient-right-arrow-thin:before {
    content: "\e006";
}

    Thanks

    ThemeNectar Support Team 

  •  1
    Simon replied
    June 8, 2018 at 11:05am

    Hi Tahir

    Thank you very much for the CSS.

    Is there a list of icons and their names / codes so I can search through and find a thicker version of "e005" etc?

    Thanks

    Simon

  •  9,006
  •  1
    Simon replied
    June 8, 2018 at 11:37am

    Hi Tahir

    Thank you however I don't think I explained myself properly :-)

    I know with Font Awesome you can go to their website and view the actual icons:

    https://fontawesome.com/icons?d=gallery&q=arrow

    You can then click on one and find out its code. For example: 

    https://fontawesome.com/icons/arrow-right?style=solid

    Is there a way of doing this with the icons you are using? Are they from IcoMoon?

    Best

    Simon

  •  9,006
    Tahir replied
    June 8, 2018 at 11:41am

    Hey Again,

    No i am afraid not , those are indeed from icomoon. You can replace them easily with fontawesome like this : 

    Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):

    .icon-salient-back-to-all:before {
    content: "\f04d";
    font-family: FontAwesome;
}
.icon-salient-left-arrow-thin:before {
    content: "\f04a";
    font-family: FontAwesome;
}
.icon-salient-right-arrow-thin:before {
    content: "\f04e";
    font-family: FontAwesome;
}

    Thanks


    ThemeNectar Support Team 

  •  1
    Simon replied
    June 8, 2018 at 11:44am

    Hi Tahir

    Super - I will give that a try. Does the theme use Font Awesome v4 or v5?

    Thanks

    Simon

  •  9,006
  •  1
    Simon replied
    June 8, 2018 at 1:28pm

    Super - thanks! You can close this ticket now.

    Best

    Simon