CODEWITHSUNDEEP
cssunicodefonts
jan
jan

Reputation: 4063

How to show an arrow down symbol with CSS

I saw some nice styled dropdown boxes like this one and wanted to create my own one:

enter image description here

The CSS to create the arrow was quite simple. It just adds a unicode character as arrow as content to the :before class of an element;

.select:before{
    content: "\f0d7";
}

I tried it on my own, but the character is not shown, because the character is not contained in a default language like Arial:

http://jsfiddle.net/3cW9M/

I could of course include a font, that contains this character, but I think its to much overhead to add another ~100kb to the page just for the error.

Is there any other good solution to archive this arrow style without additional fonts or images?

Upvotes: 11

Views: 85608

Answers (5)

BuddyBoy
BuddyBoy

Reputation: 101

If you want to use FontAwesome:

add this information into the <head> </head> section:

  <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

then this CSS:

.select:after {
  content: "\f0da";
  float: right;
  border: none;
  font-family: 'FontAwesome';
}

caret-down = "\f0d7"
caret-up = "\f0d8"
caret-left = "\f0d9"
caret-right = "\f0da"

Upvotes: 2

G-Cyrillus
G-Cyrillus

Reputation: 106058

You may use other unicode or use borders : DEMO

.select:before{
    content: "\25be  or  \25bc  ?  ";
    float:right;
    color:gray;
}
.select:after{
    content: "";
    margin:0 0.5em;
    display:inline-block;
    border: 7px solid transparent;
    border-top:8px solid gray;
    border-bottom:0 none;
}

Upvotes: 22

droymanz
droymanz

Reputation: 343

Use \25bc instead.

And if you want to change the color just add css color property.

.select:before{
    content: "\25bc";
    color: gray;
}

Upvotes: 4

KnightHawk0811
KnightHawk0811

Reputation: 931

All CSS method

 .arrow-down {
     height:0px;
     width:0px;
     border:none;
     border-top:5px solid #000000;
     border-left:5px solid rgba(0,0,0,0);
     border-right:5px solid rgba(0,0,0,0);
}

http://jsfiddle.net/2sU2x/2/

Upvotes: 2

user3646269
user3646269

Reputation:

Your estimate of 100kb is a bit off for that one arrow. You can compile fonts from just the symbols you need for your app, using for example http://icomoon.io/. I can, off hand, estimate that arrow would generate a font of about 1kB.

If you take into account all the little bits and pieces you want to include in your page, like say social plugin icons, navigation tidbits, user icons, action icons, et caetera, then the method you specify of including custom fonts in your page is pretty worth it, assuming you only include the glyphs you need!

Upvotes: 0

Related Questions