htmlcsstypescriptfluent-uifluentui-react

office ui fabric icon inside a circle

The following code puts an icon inside a circle:

<div className={classNames.left}>
  <div className={classNames.icon}><AddFriendIcon /> </div>
  <div> Add a Friend </div>
</div>

left: {
  float: 'left'
},
icon: {
  border: "solid 2px",
  borderRadius: 10,
}

The result is not as expected.

Update: Based on the below solution, I got it working. But I'm still unable to put the icon in the center of the circle and the icon & circle are not in the center of the banner:

Now, I have the following code to put an icon inside a circle and in the center of the circle. The icon is still not in the center and the circle is not aligned to 'Cafe'.

enter image description here

<div className={classNames.root} role="banner" aria-label="header">
        <div className={classNames.tabContent}> <div className={classNames.circle}><div className={classNames.icon}><CafeIcon /></div> </div> </div>
        <div className={classNames.tabContent}> Cafe </div>
      </div>

root: [
      {
        backgroundColor: theme.palette.themePrimary,
        height: 40,
        color: 'white',
        maxWidth: "100%",
        margin: '0 auto',
        borderBottom: '1px solid transparent',
        boxSizing: 'border-box',
        paddingLeft: 20,
        paddingTop: 10
      },
      className
    ],
    circle: {
      border: 'solid 2px',
      borderRadius: '50%',
      background: 'white',
      height: 20,
      width: 20,
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center'
    }, 
    tabContent: {
      color: 'white',
      float: 'left',
      border: 'none',
      outline: 'none',
      cursor: 'pointer',
      paddingLeft: 15
    },
    icon: {
      color: '#0078d7'
    }
Solution

  • 10% or 10px are not sufficient :) To create a circle, use a border radius of 50%. To center the image, you can use Flexbox.

    This could be an option for you:

    .circle {
  border: solid 2px;
  border-radius: 50%;
  background: white;
  height: 40px;
  width: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}
    <div class="left">
  <div class="circle">
    <div class="icon">image</div>
  </div>
</div>

    Learn more about Flexbox. There are probably also other options.

    Here's an update (after you have edited the question). Note that the answer above is still valid. Flexbox will help you :)

    Here's what I did to generate a circle and center an image:

    Result:

    enter image description here

    I hope this helps.

    body, html {
  margin: 0;
}

.tab {
  background-color: #0078d7;
  height: 40px;
  color: white;
  box-sizing: border-box;
  padding-left: 20px;
  padding-block: 10px;
  display: flex;
  align-items: center;
}

.circle {
  border: solid 2px;
  border-radius: 50%;
  background: white;
  height: 20px;
  width: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle img {
  max-width: 100%;
  height: auto;
}

.tabContent {
  color: white;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding-left: 15px;
}
    <div class="tab">
  <div class="circle">
    <div class="circle">
      <img src="https://cdn.pixabay.com/photo/2014/06/03/19/38/road-sign-361514_1280.png" alt="Placeholder Image">
    </div>
  </div>
  <div class="tabContent">
    Tab Content
  </div>
</div>