How to combine font-awesome and CSS triangles?


Tags: css,css3,fonts,font-awesome,css-shapes

Problem :

I'm trying to make a generic solution for adding triangles to font-awesome icons. I have a working demo of my code here: http://jsfiddle.net/remisture/2gG6d/5/

But this is not very elegant and flexible, as the code contains both font sizes and margins in pixel values. It would be perfect if the size and placement of the triangle are generated based on the parent's font size, and of course also support font-awesome's "fa-2x"-"fa-5x" classes: http://fontawesome.io/examples/

Any help would be greatly appreciated.

HTML

<div class="triangle"> 
   <i class="fa fa-plus-square"></i>
</div>

CSS

.triangle {
    font-size: 30px;
    position: relative;
    border: none;
    width: 40px;
    display: inline-block;
    margin: 0 auto;
    text-align: center;
    color: #68aaa9;
}
.triangle:after {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content:" ";
    height: 0;
    width: 0;
    position: absolute;
    border-top-color: #68aaa9;
    border-width: 5px;
    margin-left: -5px;
    margin-top: -6px
}


Solution :

I made some changes to your CSS in order to get to the desired behaviour. The triangles are sized and positioned according to the parents font size. This isn't pixel perfect but you should get the idea and be able to tweak it.

The point is to use only em or percent values to position the triangles and set the border-width.

DEMO (I also simplified the stylesheet so it is easier to tweak)

After this, you can add new classes with other values of border-width and positioning for the other classes you want to support (fa-2x-fa-5x).

Relevant CSS :

.triangle {
    position: relative;
    border: none;
    display: inline-block;
    color: #68aaa9;
    line-height:1em;
}
.triangle:after {
    content:" ";
    position: absolute;
    height: 0;
    width: 0;
    border: 0.18em solid transparent;
}
.triangle.triangle-bottom:after {
    top: 90%;
    right:0.268em;
    border-top-color: currentColor;
}
.triangle.triangle-top:after {
    bottom: 0.95em;
    left:0.268em;
    border-bottom-color: currentColor;
}
.triangle.triangle-left:after {
    right: 100%;
    top: 0.268em;
    border-right-color: currentColor;
}
.triangle.triangle-right:after {
    left: 100%;
    top: 0.268em;
    border-left-color: currentColor;
}

    CSS Howto..

    How to apply CSS to buttons?

    How to remove all pseudo selectors from a CSS selector string using Javascript?

    How to fix redefinition warnings from CSS Validator?

    CSS - How to make a relative element follow me up and down but not left and right?

    How to put a button inside of a text entry field in a form on a website using javascript, css, html

    How to add a second slideshow on the same webpage

    In CSS, how to not float a 300px wide Div to the next line?

    How do I make a Google Map span 100% remaining height between header and footer?

    SMACSS and BEM: How to position Module inside of a Module?

    How do you fade horizontal text into a vertical gradient?

    Show Pinterest hover buttons only on images with specified class

    How to make CSS compatible with all browsers?

    How to tell Modernizr load (yepnope) to add CSS at bottom of head?

    How do I move this label inside my textarea?

    How can I retrieve infos from PHP DOMElement?

    How to show a title in the border of a div [duplicate]

    How to create border around jquery mobile webpage?

    How to make Angular Forms ngModel classes inherit from Bootstrap Forms classes

    How to make image hover in css?

    How can I dynamically resize a DIV element's width to fit its text content?

    How to keep symmetry with CSS fluid spacing of dynamic content

    Show an image from b&w to color as if it were loading (left to right)

    How can I force Internet Explorer to apply CSS styles

    CSS: how to have reposition relative to a centered background image

    How to handle CSS unable to load resource error

    How to pause .setInterval() on hover and on .click() of interior content?

    How can CSS translate elements away from one point?

    How to handle caching of GWT theme CSS files

    How do I align an absolute position child element in the center of its parent div [duplicate]

    How to change a portion of text on hover with css [duplicate]