Make Font Awesome icons in a circle?
i.fa {
display: inline-block;
border-radius: 60px;
box-shadow: 0 0 2px #888;
padding: 0.5em 0.6em;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<i class="fa fa-wrench"></i>
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;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">
<span class="fa-stack fa-2x">
<i class="far fa-circle fa-stack-2x"></i>
<i class="fab fa-python fa-stack-1x"></i>
</span>
<span class="fa-stack fa-2x">
<i class="fas fa-circle fa-stack-2x" style="color:lightblue"></i>
<i class="fab fa-python fa-stack-1x "></i>
</span>
<span class="fa-stack fa-2x">
<i class="fas fa-circle fa-stack-2x" style="color:blue"></i>
<i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-2x">
<i class="fas fa-circle fa-stack-2x" ></i>
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-2x custom">
<i class="fas fa-circle fa-stack-2x" ></i>
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>
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 {font-size:2em}
.fa {
/* optionnal vertical-align: middle;*/
}
body {
background: #333
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"> <i class="fa fa-google"></i>
</a>
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}) => (
<CircleBorder
size={circleSize}
borderWidth={borderWidth}
borderColor={borderColor}
>
<IconFA {...props} />
</CircleBorder>
);
const CircleBorder = ({ size, borderWidth, borderColor, children }) => (
<View
style={{
width: size,
height: size,
borderRadius: 0.5 * size,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
borderColor,
borderWidth,
}}>
{children}
</View>
);
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:
<IconInCircle
name="plus"
size={30}
color="black"
style={styles.thumbnail}
borderWidth={1}
circleSize={50}
/>
Expo Link
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
Related Topics
How to Apply a CSS Transition to the Overflow Property
How to Compile or Convert SASS/Scss to CSS with Node-Sass (No Ruby)
What Disadvantages Are There to the <Button> Tag
Scss Extend a Nested Selector and Override the Nested Rulesets
How to Detect If the Os Is in Dark Mode in Browsers
How to Use Vertical Align in Bootstrap
Bootstrap Button Shows Blue Outline When Clicked
How to Use CSS to Position a Fixed Variable Height Header and a Scrollable Content Box
Nth-Child Doesn't Respond to Class Selector
Draw Angular Side/Parallelogram Using CSS
Media Query Not Working in IE9
Suggestions for Debugging Print Stylesheets
Css: Using Raw Svg in the Url Parameter of a Background-Image in Ie
How to Get the Nth Child of an Element Using CSS2 Selectors
How to Use the New Affix Plugin in Twitter's Bootstrap 2.1.0