Skip to main content
M
Mary_8
Known Participant
November 21, 2016
Answered

How do I make the left and right glyph icons on a carousel thinner than the standard ones?

  • November 21, 2016
  • 1 reply
  • 1146 views

How do I make the left and right glyph icons on a carousel thinner than the standard ones?

The standard ones are rather thick and my client wants thinner ones.

    This topic has been closed for replies.
    Correct answer Nancy OShea

    You can adjust the icon's font-size in your CSS code, but it doesn't really make them thinner, just smaller.

         .glyphicon-chevron-left, .glyphicon-chevron-right   {font-size: 11px}

    Or you can try Font-Awesome icons instead of Glyphicons.

    Add this CSS link to your <head> tag.

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    Font Awesome Directional Icons

    1 reply

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity ExpertCorrect answer
    Community Expert
    November 21, 2016

    You can adjust the icon's font-size in your CSS code, but it doesn't really make them thinner, just smaller.

         .glyphicon-chevron-left, .glyphicon-chevron-right   {font-size: 11px}

    Or you can try Font-Awesome icons instead of Glyphicons.

    Add this CSS link to your <head> tag.

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    Font Awesome Directional Icons

    Nancy O'Shea— Product User & Community Expert
    O
    osgood_
    Legend
    November 21, 2016

    Nancy OShea wrote:

    You can adjust the icon's font-size in your CSS code, but it doesn't really make them thinner, just smaller.

    .glyphicon-chevron-left, .glyphicon-chevron-right {font-size: 11px}

    Or you can try Font-Awesome icons instead of Glyphicons.

    Add this CSS link to your <head> tag.

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    Font Awesome Directional Icons

    I always find that the font awesome icons are rather on the 'chunky' side as well!

    Not sure why they did'nt produce them in different weights. I use them because they are clean and fast to implement BUT if you have a 'fussy' client you could be in trouble.

    EDITED

    Actually the angle ones arent bad but the rest are a bit on the heavy side.

    fa fa-angle-left

    fa fa-angle-right

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    November 21, 2016

    If you're on Mac viewing in Chrome or Safari, I think icons look weightier than on Windows. 

    Interface arrows need some girth for easier finger access.  Many clients don't stop to consider their touch screen users  'til you explain it to them.

    Nancy O.

    Nancy O'Shea— Product User & Community Expert
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices