Css icons in circle

Make Font Awesome Icons in a Circle

Font Awesome 5 — how to put an icon inside a circle?

Font Awesome already allow this, you don’t need to do it yourself:

.custom .fa-circle:before border-radius: 50%; 
background: linear-gradient(red, blue); 
color: transparent;
>

Make Font Awesome icons in a circle border with right 1:1 ratio

You need to set width, height, line height, & text-align to center the icon.
icon will need also vertical-align reset to middle.

Avoid padding in pixels, but use width/height/line-height in em or rem. You can then change font-size and keep the ratio without updating other values.

a /* or selector a .fa */ 
 < 
font-size:3em; 
border-radius: 50%; 
border: solid white; 
color: white; 
line-height: 2em; 
width: 2em; 
height: 2em; 
text-align: center; 
display: inline-block; 
transition:0.5s;
>
/* demo purpose */
a:hover 
.fa /* optionnal vertical-align: middle;*/
>
body background: #333
>

FontAwesome icon with a circle

Adding width: 1em; and text-align: center; to i.fa should work.

circle outline for fontAwesome icons in react native

The JSFiddle example that you posted creates the circle using a CSS border with border-radius to make it circular. We can do pretty much the same thing in react-native, though borderRadius in react-native can only be a fixed number and not a percent (edit: this limitation is specific to typescript since the borderRadius property has type number . Percentage strings do work at runtime).

You can tweak this code however you want, but this will get the job done. You can use IconFA and CircleBorder as two separate nested components but I also made a component IconInCircle which combines the two.

const IconInCircle = (< circleSize, borderWidth = 2, borderColor = 'black', . props>) => ( 
 size= 
borderWidth= 
borderColor= 
> 
 /> 
);

const CircleBorder = (< size, borderWidth, borderColor, children >) => ( 
 style= width: size, 
height: size, 
borderRadius: 0.5 * size, 
display: 'flex', 
justifyContent: 'center', 
alignItems: 'center', 
borderColor, 
borderWidth, 
>>> 
 
);

The IconInCircle component takes three props specific to the border: circleSize , borderWidth , and borderColor . All other props are passed through into the IconFA child component.

Basically what we are doing is placing the icon inside of a fixed-size View with a circular border and centered contents.

Now we can use it like so:

  name="plus" 
size= 
color="black" 
style= 
borderWidth= 
circleSize= 
/>

Does Google Chrome have a problem with Font-Awesome Icons. Does it not support it?

I’m not an expert but maybe look up the icons again on Font Awesome and check if they maybe changed the class names and if so update it, same goes for the CDN link

Источник

Css circle html with icons arounds

In order to achieve the correct effect and not apply a style twice, we will have to count down from our last element in order to only attract elements at a certain position. Don’t forget to add any you need (I added them to the snippet because I am using Safari) call circle icon in html css

How to add icons outside rounded circle using css?

I have a video inside a circle, now I want to add Icons outside the circle.

This is how I want it look like .

Here is what I have tried so far

body, html < overflow: hidden; margin: 0px; padding: 0px; >.video-conatiner_datavideo < width: 250px; height: 250px; border-radius: 125px; -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); position: absolute; bottom: 0px; right: 0px; >video

to be honest I tried different ways but unfortunately, I came up with nothing. am out of Ideas.

What do I need to change to get what I want?

I suspect this sketch could be better coded using CSS transform-origin property or matrix function. But in my example I calculated case by case 70 + 150*cos(x) and 70 — 150*sin(x) for x equals to multiples of pi/6 (that wasn’t too terrible).

#circone< margin: 100px; position: relative; background-color: #f00; width: 200px; height: 200px; border-radius: 100px; >.cism < position: absolute; width: 60px; height: 60px; border-radius: 30px; >#twoa #twob #twoc #twod #twoe

Then you can use a different background-image for each one of the circles, or videos if you like.

Css circle with icon inside it [duplicate], I have managed to create css circles with icon inside it but text after it is not in line with cirlce. enter image description here .circle

Wrap icons around an extendable circle

I have a disc whose size can change, and some icons arranged around that disc. The icons should always be on the border of the disc, and the intervals between each icon should always stay the same.

Can this be done in pure css without having to compute each icon’s position whenever the disc grows or shrinks?

.container:nth-child(1) < position: absolute; top: 20px; left: 30px; height: 280px; width: 280px; >.container:nth-child(2) < position: absolute; top: 20px; right: 30px; height: 200px; width: 200px; >.container > * < position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); >.circle < height: 90%; width: 90%; border-radius: 50%; border: 1px solid blue; z-index: 20; >.icons < height: 100%; width: 100%; border: 1px dashed gray; box-sizing: border-box; z-index: 10; >.icons > * < position: absolute; top: 50%; left: 50%; height: 20px; width: 20px; margin-top: -10px; margin-left: -10px; border: 1px solid red; >.container:nth-child(1) span:nth-child(1) < transform: rotate(230deg) translate(150px) rotate(-230deg); >.container:nth-child(1) span:nth-child(2) < transform: rotate(217deg) translate(150px) rotate(-217deg); >.container:nth-child(1) span:nth-child(3) < transform: rotate(204deg) translate(150px) rotate(-204deg); >.container:nth-child(1) span:nth-child(4) < transform: rotate(191deg) translate(150px) rotate(-191deg); >.container:nth-child(2) span:nth-child(1) < transform: rotate(230deg) translate(110px) rotate(-230deg); >.container:nth-child(2) span:nth-child(2) < transform: rotate(212deg) translate(110px) rotate(-212deg); >.container:nth-child(2) span:nth-child(3) < transform: rotate(194deg) translate(110px) rotate(-194deg); >.container:nth-child(2) span:nth-child(4)

Without a preprocessor, I believe you’ll need a script to achieve this. Here I’ve used jQuery in order to compute the intervals on hover.

this would also support a dynamic number of .circle elements

+ function() < var to; $(".wrap").on('mouseenter', function() < var circles = $(this).find(".circle"); var degree = (2 * Math.PI) / circles.length; //calc delta angle var transforms = []; // Calculate the position for each circle circles.each(function(index) < var x = 100 * Math.cos(-0.5 * Math.PI + degree * (-1 * index - 0.5)); var y = 100 * Math.sin(-0.5 * Math.PI + degree * (-1 * index - 0.5)); transforms.push('translate(' + x + 'px,' + y + 'px)'); >); // Function to moves all the circles // We'll pop a circle each time and than call this function recursively function moveCircles() < var transform = transforms.shift(); circles.css('transform', transform); circles.splice(0, 1); if (circles.length) to = setTimeout(moveCircles, 400); >moveCircles(); >); $(".wrap").on('mouseleave', function() < var circles = $(this).children().css('transform', ''); clearTimeout(to); >); >();

html < height: 100%; background: radial-gradient(ellipse at center, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%); >.wrap < height: 300px; width: 300px; position: relative; transform-origin: center center; transition: all 0.8s; >.circle < transition: all 0.8s; position: absolute; height: 5px; width: 5px; text-align: center; line-height: 15px; top: calc(50% - 2px); left: calc(50% - 2px); border-radius: 50%; overflow: hidden; >.parent < transition: all 0.8s; position: absolute; background: gray; height: 50px; width: 50px; text-align: center; line-height: 25px; top: calc(50% - 25px); left: calc(50% - 25px); border-radius: 50%; z-index: 8; box-shadow: inset 2px 2px 10px black, inset 0 0 15px black, 0 0 15px black; >.parent:before, .parent:after < content: ""; position: absolute; transition: all 0.8s; height: 5px; width: 25px; top: 22px; left: 12px; background: black; opacity: 1; >.parent:before < top: 15px; box-shadow: 0 14px 0 black; >.parent:hover:before, .parent:hover:after < transform: translate(0, 20px); color: gray; opacity: 0; box-shadow: 0 14px 0 none; >.wrap:hover .parent, .wrap:hover .parent:before, .wrap:hover .parent:after < background: darkgray; >.wrap:hover .parent:before < box-shadow: none; >.wrap:hover .circle < height: 50px; width: 50px; line-height: 25px; top: calc(50% - 25px); left: calc(50% - 25px); box-shadow: inset 2px 2px 10px black, inset 0 0 15px black, 0 0 15px black; >.circle img < position: absolute; height: 100%; width: 100%; left: 0; top: 0; >.circle:before < border-radius: 50%; transition: all 0.8s; content: ""; position: absolute; height: 100%; width: 100%; top: 0; left: 0; z-index: 8; >.circle:after, button:after < transition: all 0.8s; border-radius: 50%; content: ""; position: absolute; height: 200%; width: 200%; top: 50%; left: 200%; z-index: 8; background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 0.4)), color-stop(100%, rgba(255, 255, 255, 0))); background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%); background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%); background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%); filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#00ffffff', GradientType=1); >.circle:hover:after, button:hover:after < left: -200%; top: -50%; >.circle:hover:before

There is a way to do it programmatically, but only with CSS3. What you have to do is have an element inside it that takes the full width and can rotate, and then counterrotate the inner containers of those rotating elements.

So you would have to define the circles by using :nth-child . In order to achieve the correct effect and not apply a style twice, we will have to count down from our last element in order to only attract elements at a certain position. This is because :nth-child(2n) applies to :nth-child(4n) as well, which might create overlapping styles. Skip to the snippet if this seems a bit too complicated — it’s actually quite simple.

So your basic HTML would be:

The first element has to have a position enabled. The second element needs to overlap with all the other secondary elements, so it needs a position of absolute, and the third element, well, that’s up to you. It’s just there to counter rotate it again.

/*The following animation shows that the outer frame is resizeable.*/ @-webkit-keyframes sizeBounce < 0% 50% 100% > @keyframes sizeBounce < 0% 50% 100% >div < position: relative; /* Any height you want here */ width: 20vw; height: 20vw; border-radius: 50%; border: 1px solid #000; -webkit-animation: sizeBounce 2s infinite; animation: sizeBounce 2s infinite; /* You can do anything you want with this circle! */ position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); >div > span < position: absolute; display: block; width: 100%; height: 100%; top: 0; left: 0; transform: rotateZ(0deg); transform-origin: 50% 50%; >div > span > em < display: block; position: absolute; left: 0; top: 0; width: 20%; height: 20%; border-radius: 50%; border: 1px solid #dd0300; text-align: center; >div > span:nth-child(6n-6) < -webkit-transform: rotateZ(0deg); transform: rotateZ(0deg); >div > span:nth-child(6n-6) > em < -webkit-transform: rotateZ(0deg); transform: rotateZ(0deg); >div > span:nth-child(6n-4) < -webkit-transform: rotateZ(60deg); transform: rotateZ(60deg); >div > span:nth-child(6n-4) > em < -webkit-transform: rotateZ(-60deg); transform: rotateZ(-60deg); >div > span:nth-child(6n-3) < -webkit-transform: rotateZ(120deg); transform: rotateZ(120deg); >div > span:nth-child(6n-3) > em < -webkit-transform: rotateZ(-120deg); transform: rotateZ(-120deg); >div > span:nth-child(6n-2) < -webkit-transform: rotateZ(180deg); transform: rotateZ(180deg); >div > span:nth-child(6n-2) > em < -webkit-transform: rotateZ(-180deg); transform: rotateZ(-180deg); >div > span:nth-child(6n-1) < -webkit-transform: rotateZ(240deg); transform: rotateZ(240deg); >div > span:nth-child(6n-1) > em < -webkit-transform: rotateZ(-240deg); transform: rotateZ(-240deg); >div > span:nth-child(6n) < -webkit-transform: rotateZ(300deg); transform: rotateZ(300deg); >div > span:nth-child(6n) > em

There is a way to automate this is SASS as well and it looks something like this:

@mixin rotatePiecemeally($pieces:6,$wrapper:span,$container:em)< /* First calculate the angle between each piece */ $degrees : 360 / $pieces; /* We want to count back from the amount of pieces to 0 * The counting is because simple counting 2n, 3n, 4n, . * will result in 4n inheriting from 2n - to keep things clean, * we want to avoid that. */ @for $i from 0 through ($pieces - 1)< & #:nth-child(#n-#)< transform: rotateZ(#deg); > & #:nth-child(#n-#) > #< transform: rotateZ(#deg); > > > 

You can call it by doing the following:

And you can optionally include which elements you want to use as the children. Don’t forget they all need some absolute positioning for this to work. Don’t forget to add any prefixes you need (I added them to the snippet because I am using Safari)

Border-radius css forms an oval shape [duplicate], You need to define a set width and height to ensure you get a perfect circle. Your code right doesn’t have them defined, so the height/width won

Circle background for icon css

How to add icons outside rounded circle using css?, am out of Ideas. What do I need to change to get what I want? html css · Share.

Источник

CSS Circle Menu With Icons | Pure HTML CSS Circular Menu

Maybe you have seen a circular menu before, Nowadays some websites use this type of menu. Peoples who want to make their website good looking and attractive they always use different kinds of elements. This is also a part of good UI & UX design.

Now question is that how we can also create a circular menu? After seeing this post, you will be able to create this. Because I am providing a solution to your need. So, Today I am sharing CSS Circle Menu With Icons, a pure HTML CSS Circular menu. This also has a responsive design using CSS, you can call this Pure CSS Responsive Circular Menu.

This menu has something like the material design because I used good shadow combination. & I had put two times on every CSS animation property because all browsers can support this program. Last time my one visitor says, it’s not working on Edge browser , That’s why I am doing that this time. I used the font-awesome (get) library for creating icons.

If you are thinking now, how the program actually is which I am talking about, then see this preview given below.

Preview Of Circular Menu With Material Design

See this video preview to getting an idea of how this program looks like.

Now you can see this program visually. If you like this, then get the source code of its.

Pure CSS Circle Menu Source Code

Before sharing source code, Let’s talk a little bit about the program. As you know this is a Pure HTML CSS Circle or Circular Menu with icons and responsive design. To create this program I used only an external library for icons, that’s I told about before. I mostly used CSS transition and transform property to creating this. I also use duplicate animation property with -WebKit- extension. Because most browsers can run this program properly.

I also used CSS @media property to create this program responsively.

For creating this program you have to create only 2 files. One for HTML and one for CSS. Follow the steps to create this program without any error.

Create an HTML file named ‘index.html‘ and put these codes given below.

Источник