Software Developer

Astrology Icons With CSS

This is an example of how to make astrology or zodiac icons with plain CSS. You’ll be able to use the icons as plain symbols, like in the image above. You’ll also be able to display the icons as buttons like in the following image. You’ll be able to change the color, as desired.

Vanilla CSS Astrology Zodiac Icons

You can jump down to the Usage section, which shows you the HTML code for each icon. In the Usage section, you’ll find the codes for the 12 zodiac sign icons, 13 planet/luminary icons, and special points icons (which includes a coment symbol and retrograde symbol), Asteroids symbol icons, and aspects icons.

You can also jump down to the Customize section which shows you how to change the appearance and color of the icons.

This is the required CSS:

.ai {
    font-style:normal;
    color:purple;
    font-weight:bold;
    font-size:24px;
    line-height:24px;
}
.ai.aries,.ai.taurus,.ai.gemini,.ai.cancer,.ai.leo,.ai.virgo,.ai.libra,.ai.scorpio,.ai.sagittarius,.ai.capricorn,.ai.aquarius,.ai.pisces {
    font-weight:normal;
}
.ai.aries:before {
    content:"\2648";
  display:inline;
  text-decoration:none;
}
.ai.taurus:before {
    content:"\2649";
}
.ai.gemini:before {
    content:"\264A";
}
.ai.cancer:before {
    content:"\264B";
}
.ai.leo:before {
    content:"\264C";
}
.ai.virgo:before {
    content:"\264D";
}
.ai.libra:before {
    content:"\264E";
}
.ai.scorpio:before {
    content:"\264F";
}
.ai.sagittarius:before {
    content:"\2650";
}
.ai.capricorn:before {
    content:"\2651";
}
.ai.aquarius:before {
    content:"\2652";
}
.ai.pisces:before {
    content:"\2653";
}
.ai.sun:before {
    content:"\2609";
}
.ai.moon:before {
    content:"\263D";
}
.ai.moon-variant:before {
    content:"\263E";
}
.ai.earth:before {
    content:"\2295";
}
.ai.mercury:before {
    content:"\263F";
}
.ai.venus:before {
    content:"\2640";
}
.ai.mars:before {
    content:"\2642";
}
.ai.jupiter:before {
    content:"\2643";
}
.ai.saturn:before {
    content:"\2644";
}
.ai.uranus:before {
    content:"\2645";
}
.ai.neptune:before {
    content:"\2646";
}
.ai.pluto:before {
    content:"\2647";
}
.ai.chiron:before {
    content:"\26B7";
}
.ai.north-node:before {
    content:"\260A";
}
.ai.south-node:before {
    content:"\260B";
}
.ai.part-of-fortune:before {
    content:"\2297"
}
.ai.lilith:before {
    content:"\26B8";
}
.ai.ceres:before {
    content:"\2A1"
}
.ai.juno:before {
    content:"\26B5";
}
.ai.pallas:before {
    content:"\26B4";
}
.ai.vesta:before {
    content:"\26B6";
}
.ai.conjunction:before {
    content:"\260C"
}
.ai.square:before {
    content:"\25A1"
}
.ai.trine:before {
    content:"\25B3"
}
.ai.opposition:before {
    content:"\260D"
}
.ai.semisquare:before {
    content:"\2220"
}
.ai.quintile:before {
    content:"\051"
}
.ai.biquintile:before {
    content:"\0062\0051"
}
.ai.retrograde:before {
    content:"\211E"
}
.ai.comet:before {
    content:"\2604"
}

Top ↑

Usage

This section shows you the HTML code for each astrology symbol. To use a symbol, paste the HTML code anywhere you want to display the astrology icon.

Zodiac Sign Symbol Icons

  1. Aries symbol:

    <i class="ai aries"></i>
  2. Taurus symbol:

    <i class="ai taurus"></i>
  3. Gemini symbol:

    <i class="ai gemini"></i>
  4. Cancer symbol:

    <i class="ai cancer"></i>
  5. Leo symbol:

    <i class="ai leo"></i>
  6. Virgo symbol:

    <i class="ai virgo"></i>
  7. Libra symbol:

    <i class="ai libra"></i>
  8. Scorpio symbol:

    <i class="ai scorpio"></i>
  9. Sagittarius symbol:

    <i class="ai sagittarius"></i>
  10. Capricorn symbol:

    <i class="ai capricorn"></i>
  11. Aquarius symbol:

    <i class="ai aquarius"></i>
  12. Pisces symbol:

    <i class="ai pisces"></i>

Top ↑

Planets and Luminaries Symbol Icons

  1. Sun symbol:

    <i class="ai sun"></i>
  2. Moon symbol:

    <i class="ai moon"></i>
  3. Alternate Moon symbol:

    <i class="ai moon-variant"></i>
  4. Earth symbol:

    <i class="ai earth"></i>
  5. Mercury symbol:

    <i class="ai mercury"></i>
  6. Venus symbol:

    <i class="ai venus"></i>
  7. Mars symbol:

    <i class="ai mars"></i>
  8. Jupiter symbol:

    <i class="ai jupiter"></i>
  9. Saturn symbol:

    <i class="ai saturn"></i>
  10. Uranus symbol:

    <i class="ai uranus"></i>
  11. Neptune symbol:

    <i class="ai neptune"></i>
  12. Pluto symbol:

    <i class="ai pluto"></i>
  13. Chiron symbol:

    <i class="ai chiron"></i>

Top ↑

Special Points, Comet and Retrograde Symbols

  1. North Node symbol:

    <i class="ai north-node"></i>
  2. South Node symbol:

    <i class="ai south-node"></i>
  3. Part of Fortune symbol:

    <i class="ai part-of-fortune"></i>
  4. Black Moon Lilith symbol:

    <i class="ai lilith"></i>
  5. Comet symbol:

    <i class="ai comet"></i>
  6. Retrograde symbol:

    <i class="ai retrograde"></i>

Top ↑

Asteroids Symbols

  1. Ceres symbol:

    <i class="ai ceres"></i>
  2. Juno symbol:

    <i class="ai juno"></i>
  3. Pallas symbol:

    <i class="ai pallas"></i>
  4. Vesta symbol:

    <i class="ai vesta"></i>

Top ↑

Aspects Symbol Icons

  1. Conjunction symbol:

    <i class="ai conjunction"></i>
  2. Square symbol:

    <i class="ai square"></i>
  3. Trine symbol:

    <i class="ai trine"></i>
  4. Opposition symbol:

    <i class="ai opposition"></i>
  5. Semisquare symbol:

    <i class="ai semisquare"></i>
  6. Quintile symbol:

    <i class="ai quintile"></i>
  7. Biquintile symbol:

    <i class="ai biquintile"></i>

Top ↑

Customize The Appearance

I’ve made the icons purple. To choose your own color, edit line 3 in the CSS block. (The CSS block is the first code block at the top of this page.) In that code block, change purple on line 3 to your own color code.

You can make the icons look like square buttons, as in the second picture, above. That picture has a row of purple square icons and a row of white square icons. To make your icons look like those in the first row, add the following CSS, as is. This will make plum-colored icons. To make the icons white, as in the second row of the picture, change plum on line 2, to #f7f7f7. Or, change it to any desired background color for your icons.

.ai {
  background: plum;
  color:#141414;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
  display:inline-block;
  margin: 5px;
  padding: 10px 15px 12px;
  border-radius: 4px;
  box-shadow: inset 0 -1px 0 1px rgba(0, 0, 0, .1), inset 0 -10px 20px rgba(0, 0, 0, .1);  
}

Top ↑

By

We've 2 Responses

  1. May 4th, 2018 at 11:14 pm

    This is an incredibly helpful post. Thank you so much. Will definiately use this code in some web pages I am working on.

    Wondering if you know where I can get an AI version of all these symbols. Would be good for creating graphics.

    avatar

Questions and Comments are Welcome

Your email address will not be published. All comments will be moderated.

Please wrap code in "code" bracket tags like this:

[code]

YOUR CODE HERE 

[/code]