It is necessary that the icon is pointing down, as shown in the picture:

enter image description here

.marker-icon { display: block; width: 20px; height: 20px; background: #fff; border-radius: 3px; text-align: center; transform: rotate(45deg) translate(2px, 2px); position: absolute; left: 50%; bottom: 38px; } 
 <a class="marker-icon" href="#"> <i class="fa fa-angle-down"></i> </a>

enter image description here

  • In the code at least one open quote - andreymal

3 answers 3

Everything is centered

 .marker-icon { display: block; width: 20px; height: 20px; background: #fff; border-radius: 3px; text-align: center; transform: rotate(45deg); position: relative; border: 1px solid red; } i { font-size: 14px; } 
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <a class="marker-icon" href="#"> <i class="fa fa-angle-down "></i> </a>

The second option is centering on the center of the screen:

 * { margin: 0; padding: 0; box-sizing: border-box; } .marker-icon { display: block; width: 20px; height: 20px; background: #fff; border-radius: 3px; text-align: center; position: relative; position: absolute; top: 0; right: 0; left: 0; bottom: 0; margin: auto; transform: rotate(45deg); } i { font-size: 20px; display: inline-block; width: 20px; height: 20px; } 
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <a class="marker-icon" href="#"> <i class="fa fa-angle-down "></i> </a>

  • I think the author of the question incorrectly formulated the question, the title says “Why not put an icon in the middle,” and in the description, “I need the icon to be ticked off towards a rhombus” - Arthur

 .marker-icon { display: flex; width: 20px; height: 20px; background: #fff; border-radius: 3px; justify-content: center; align-items: center; text-decoration: none; transform: rotate(45deg); border: 1px solid red; } i { font-size: 14px; transform: rotate(-45deg); } 
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <a class="marker-icon" href="#"> <i class="fa fa-angle-down "></i> </a>

I do not understand the question. need something like that?

  • Yes Yes Yes! thank you so much you helped me out. I couldn’t understand. spent two days on this. - Tata
  • It's my pleasure. Good luck. Waiting for a plus sign ) - Areshka
  • @ TatyanaPonomarenko, the answer you wrote below is that you need to give a negative rotate for the icon :)) - Arthur

If you want the checkmark icon in a diamond to be directed down, simply apply the CSS transformation to it, the reverse of the one that was used to rotate the diamond.

  • Probyval does not work - Tata