5

I have seen Unicode for alphabets symbols, and have used in many areas. Recently I have a new requirement to create a ascending and descending functionality for which within the button I need to but the icons for that, I have seen the Icons for the ascending and descending in many areas, an example is shown in the picture

enter image description here

But couldn't find any Unicode character for that anywhere, I have tried to make a similar icon like the above with Unicode like as shown below, but not able to create like as shown in the above picture

<span>&#65;&#90;&#8595;</span>

AZ↓

Can anyone please tell me some solution for this, is there any Unicode or Icons image for that available in web

1

3 Answers 3

9

Just for the giggles :)

.letter {
    font-size: 10px;
    float: left;
    font-weight: 600;
    font-family: sans-serif;
}
.crimson {
    color : crimson;
}
.darkblue {
    color: darkblue;
}
.arrow {
    font-weight: 900;
    font-size: 20px;
    line-height: 10px;
}
.container {
    width: 10px;
    line-height: 9px;
}
<div class="container">
    <span class="letter darkblue">A</span>
    <span class="letter crimson">Z</span>
</div>
<span class="arrow">&#8595;</span>

<div style="height: 30px;"></div>

<div class="container">
    <span class="letter crimson">Z</span>
    <span class="letter darkblue">A</span>
</div>
<span class="arrow">&#8595;<span>

1
  • @Ismali its working fine, but the arrow seens a little bit down
    – Alex Man
    Commented Apr 28, 2015 at 14:52
3

Use fontawesome. They have this icon and are free. http://fortawesome.github.io/Font-Awesome/icon/sort-alpha-asc/

0

You can try to use http://glyphicons.com/ , or http://fortawesome.github.io/Font-Awesome/icons/ especially if you need to use multiple icons in your project. They are vector based so they have the same quality even on scaling. Also you can control them with css(the font-size, color and background

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.