2

I am trying to position smaller circles on the edge of a bigger circle like so:

enter image description here

The only problem i have with this whole thing is that all of the circles will change in siize depending on the size of the users display.

Each of the smaller circles contain a font awesome icon which has to be centered within the smaller circle with a little distance to the edges.

Does anyone have an idea how to do this?

Dennis
  • 595
  • 1
  • 6
  • 22
  • Similar question was answered here http://stackoverflow.com/questions/12813573/position-icons-into-circle Should be easily possible to re-use for your example. Since everything is specified in `em`s, you should be able to change the size via `font-size`. – Tigran Petrossian Apr 01 '17 at 23:51
  • Thank you for your answer. The axample you gave me uses images and not those icons. With images this whole thing is a lot easier because i can just use percentages. But that is not possible with the icons. As you said i would have to regulate the size with font-size. But depending on the icon that is almost impossible to guarantee that it looks good on every device. – Dennis Apr 02 '17 at 00:06
  • It's possible, set the size for the icon separately. – Tigran Petrossian Apr 02 '17 at 00:09
  • But how do i do that when the size of the div that hold the icon changes with the screen size of the device? I would have to set a percentage of the containing div. – Dennis Apr 02 '17 at 00:13
  • I think you need to learn more CSS to be able to look at the problem from different angles. Off the top of my head I can think of few solutions depending on the circumstances, which you didn't describe, nor did you give a code example of what you tried. Here's a fluid version that uses viewport units and resizes with the screen, it can be tweaked infinitely depending on your situation. https://codepen.io/anon/pen/MpLJNP – Tigran Petrossian Apr 02 '17 at 00:42
  • That looks aweome. Thank you. Could you post that as an answer so that i can mark it as most helpful? – Dennis Apr 02 '17 at 00:47
  • My answer is largely based on Ana's solution I linked above. Feel free to upvote hers. – Tigran Petrossian Apr 02 '17 at 00:48

0 Answers0