关键词:
【中文标题】在一个圆圈中制作 Font Awesome 图标?【英文标题】:Make Font Awesome icons in a circle? 【发布时间】:2014-03-21 06:32:09 【问题描述】:我在某个项目中使用了很棒的字体,但是我想用字体很棒的图标做一些事情,我可以轻松地调用这样的图标:
<i class="fa fa-lock"></i>
是否有可能所有图标总是在带边框的圆形圆圈中?像这样的东西,我有一张图片:
使用
i
background-color: white;
border-radius: 50%;
border: 1px solid grey;
padding: 10px;
会做效果,但问题是图标总是比旁边的文本或元素大,有什么解决办法吗?
【问题讨论】:
【参考方案1】:更新:宁可使用 flex。
如果你想要精确,这就是你要走的路。
小提琴。去玩 -> http://jsfiddle.net/atilkan/zxjcrhga/
这里是 HTML
<div class="sosial-links">
<a href="#"><i class="fa fa-facebook fa-lg"></i></a>
<a href="#"><i class="fa fa-twitter fa-lg"></i></a>
<a href="#"><i class="fa fa-google-plus fa-lg"></i></a>
<a href="#"><i class="fa fa-pinterest fa-lg"></i></a>
</div>
这里是 CSS
.sosial-links a
display: block;
float: left;
width: 36px;
height: 36px;
border: 2px solid #909090;
border-radius: 20px;
margin-right: 7px; /*space between*/
.sosial-links a i
padding: 12px 11px;
font-size: 20px;
color: #909090;
注意:不要再使用它了。使用弹性盒子。
【讨论】:
添加 text-align:center;使它适用于几乎所有东西,甚至是 fa-info 垂直对齐怎么样? 你能调查一下吗? ***.com/questions/64270359/…【参考方案2】: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>
旧答案的 JsFiddle:http://fiddle.jshell.net/4LqeN/
【讨论】:
有一些东西,但不是圆形?border-radius
应该对元素进行四舍五入。你用什么浏览器?将使用前缀更新我的答案
但这不是解决方案。这仅在 i
有内容时才有效。通常使用 FA,您的 i-tag 中没有内容,但图标稍后由 CSS 呈现:<i class="fa fa-lock"></i>
,这正是 @Schneider 实际要求的。
@Jan 我明天将对此进行调查。但我看不到问题。你是对的,标签没有内容,但内容将通过 css 添加。即使图标无法加载,您也会看到一个圆圈。你能用答案制作一个问题的 jsFiddle 吗?
没有。这就是问题的答案。查看问题的图像。有阴影,不是硬圆。【参考方案3】:
使用em
作为基本度量的圆圈中的字体图标
如果你使用 ems 进行测量,包括 line-height
、font-size
和 border-radius
,加上 text-align: center
,它会让事情变得非常可靠:
#info i
font-size: 1.6em;
width: 1.6em;
text-align: center;
line-height: 1.6em;
background: #666;
color: #fff;
border-radius: 0.8em; /* or 50% width & line-height */
【讨论】:
你能调查一下吗? ***.com/questions/64270359/…【参考方案4】:这是迄今为止我发现的最好和最精确的解决方案。
CSS:
.social .fa
margin-right: 1rem;
border: 2px #fff solid;
border-radius: 50%;
height: 20px;
width: 20px;
line-height: 20px;
text-align: center;
padding: 0.5rem;
【讨论】:
【参考方案5】:使用 Font Awesome,您可以轻松地使用这样的堆叠图标:
<span class="fa-stack fa-2x">
<i class="fas fa-circle-thin fa-stack-2x"></i>
<i class="fas fa-lock fa-stack-1x fa-inverse"></i>
</span>
参考Font Awesome Stacked Icons
更新:- 小提琴stacked icons
【讨论】:
堆叠图标只能达到 2 倍。如果你想要比那个更大,它就行不通 希望这是公认的答案,它是使用 fontawesome 做到这一点的“正确”方法。接受的答案是不能很好地调整的 hack。 与数字相同<span class="fa-stack fa-lg"> <i class="fa fa-circle-thin fa-stack-2x"></i> <i class="fa fa-stack-1x">1</i> </span>
@emrah - 这是这里唯一真正令人敬畏的字体,而不是自定义 css,所以它比这里的任何东西都更精确。
非常优雅的解决方案。 @mmativ 如果您的意思是圆圈上的背景颜色,您只需执行 【参考方案6】:
您可以使用以下代码简单地获得圆形图标:
<a class="facebook-share-button social-icons" href="#" target="_blank">
<i class="fab fa-facebook socialicons"></i>
</a>
现在你的 CSS 将是:
.social-icons
display: inline-block;border-radius: 25px;box-shadow: 0px 0px 2px #888;
padding: 0.5em;
background: #0D47A1;
font-size: 20px;
.socialiconscolor: white;
【讨论】:
你能调查一下吗? ***.com/questions/64270359/…【参考方案7】:您不需要 css 或 html 技巧。 Font Awesome 为其内置了类 - fa-circle 要将多个图标堆叠在一起,您可以在父 div 上使用 fa-stack 类
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
//我们现在在圆圈内有 facebook 图标:)
【讨论】:
Sampat Badhe 在两年多前的回答中也说过同样的话。为什么在写你的答案之前不阅读其他答案? 嘿,对不起 Sampat,我没有看到他回答,我会尝试修改我的答案并添加更多解决方案或有用的信息。 这是一个很好的解决方案,但它为每个图标提供了蓝色背景。有什么解决办法吗? @CodeIt 只需使用 css 清除它或添加新的背景颜色。这应该不是问题。 你能调查一下吗? ***.com/questions/64270359/…【参考方案8】:我喜欢 Dave Everitt 用 « line-height » 回答的问题,但它只能通过指定 « height » 才能起作用,然后我们必须将 « !important » 添加到 line-height ...
.cercle
font-size: 2em;
width: 2em;
height: 2em;
text-align: center;
line-height: 2em!important;
background: #666;
color: #fff;
border-radius: 2em;
【讨论】:
行高帮我解决了 添加!important
是一种创可贴,而不是解决方案。这意味着您在其他地方有另一个 CSS 属性覆盖了您的属性。【参考方案9】:
更新:
最近学习了 flex,有一种更简洁的方法(没有表格和更少的 css)。将包装器设置为display: flex;
并将它的子级居中给它属性align-items: center;
用于(垂直)和justify-content: center;
(水平)居中。
看到这个updated JS Fiddle
奇怪的是,以前没有人建议过这个。我总是用表格来做这个。
只需让包装器包含 display: table
并在其中居中放置东西,text-align: center
用于水平对齐,vertical-align: middle
用于垂直对齐。
<div class='wrapper'>
<i class='icon fa fa-bars'></i>
</div>
还有一些像这样的 sass
.wrapper
display: table;
i
display: table-cell;
vertical-align: middle;
text-align: center;
或查看JS Fiddle
【讨论】:
这是一款非常漂亮、干净又小巧的!这是 CSS 而不是 SCSS jsfiddle.net/bqtkmy0s @summsel 这不是与我原来的答案确切相同吗?您只是在 scss 中而不是 css 中编写代码。 是的,当然是。我在 css 中尝试了您的解决方案,并且有很多人更喜欢 css。那么为什么不发布这个 css-version 的 jsfiddle。 你能调查一下吗? ***.com/questions/64270359/…【参考方案10】:Font Awesome 图标作为 :before 插入。因此,您可以像这样设置 i 或 a 的样式:
.i
background: #fff;
border-radius: 50%;
display: inline-block;
height: 20px;
width: 20px;
<a href="#"><i class="fa fa-facebook fa-lg"></i></a>
【讨论】:
你能调查一下吗? ***.com/questions/64270359/…【参考方案11】:这是您不需要使用padding
的方法,只需为a
设置height
和width
并让flex
处理margin: 0 auto
。
.social-links a
text-align:center;
float: left;
width: 36px;
height: 36px;
border: 2px solid #909090;
border-radius: 100%;
margin-right: 7px; /*space between*/
display: flex;
align-items: flex-start;
transition: all 0.4s;
-webkit-transition: all 0.4s;
.social-links a i
font-size: 20px;
align-self:center;
color: #909090;
transition: all 0.4s;
-webkit-transition: all 0.4s;
margin: 0 auto;
.social-links a i::before
display:inline-block;
text-decoration:none;
.social-links a:hover
background: rgba(0,0,0,0.2);
.social-links a:hover i
color:#fff;
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="social-links">
<a href="#"><i class="fa fa-facebook fa-lg"></i></a>
<a href="#"><i class="fa fa-twitter fa-lg"></i></a>
<a href="#"><i class="fa fa-google-plus fa-lg"></i></a>
<a href="#"><i class="fa fa-pinterest fa-lg"></i></a>
</div>
【讨论】:
你能调查一下吗? ***.com/questions/64270359/…【参考方案12】:试试这个
HTML:
<div class="icon-2x-circle"><i class="fa fa-check fa-2x"></i></div>
CSS:
i
width: 30px;
height: 30px;
.icon-2x-circle
text-align: center;
padding: 3px;
display: inline-block;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
-moz-box-shadow: 0px 0px 2px #888;
-webkit-box-shadow: 0px 0px 2px #888;
box-shadow: 0px 0px 2px #888;
【讨论】:
【参考方案13】:下面的例子不太适合我,这是我制作的版本!
HTML:
<div class="social-links">
<a href="#"><i class="fa fa-facebook fa-lg"></i></a>
<a href="#"><i class="fa fa-twitter fa-lg"></i></a>
<a href="#"><i class="fa fa-google-plus fa-lg"></i></a>
<a href="#"><i class="fa fa-pinterest fa-lg"></i></a>
</div>
CSS:
.social-links
text-align:center;
.social-links a
display: inline-block;
width:50px;
height: 50px;
border: 2px solid #909090;
border-radius: 50px;
margin-right: 15px;
.social-links a i
padding: 18px 11px;
font-size: 20px;
color: #909090;
【讨论】:
【参考方案14】:您也可以这样做。我想在我的 icomoon 图标周围添加一个圆圈。这是代码。
span
font-size: 54px;
border-radius: 50%;
border: 10px solid rgb(205, 209, 215);
padding: 30px;
【讨论】:
如何在 Firefox 中显示 Font Awesome 图标?
】如何在Firefox中显示FontAwesome图标?【英文标题】:HowtodisplayFontAwesomeiconsinFirefox?【发布时间】:2013-02-1109:23:41【问题描述】:我将Font-Awesome-Sass-Railsgem用于图标字体,它们在除Firefox之外的所有浏览器中都能正常显示。我目前正... 查看详情
Xcode Storyboard - 使用 font-awesome 制作文本 rtl
】XcodeStoryboard-使用font-awesome制作文本rtl【英文标题】:XcodeStoryboard-makingthetextrtlwithfont-awesome【发布时间】:2019-05-0600:14:27【问题描述】:我想在我的按钮文本中使用来自font-awesome的图标和旁边的文本。我使用的是希伯来语文本... 查看详情
解决在html中引入font-awesome的css文件后,图标显示不出来
今天小颖在做项目时,需要在html文件中引入font-awesome.min.css,但是引入后:虽然小颖已经在html中引入了 font-awesome.min.css ,但是图标并没有出来,怎么解决呢?其实只需要把font-awesome中的fonts文件夹放在与font-awesome.css... 查看详情
在输入占位符文本中使用 Font Awesome (5) 图标
】在输入占位符文本中使用FontAwesome(5)图标【英文标题】:UseFontAwesome(5)iconininputplaceholdertext【发布时间】:2018-10-0717:35:54【问题描述】:我遇到了很多使用FontAwesome这是在占位符文本中添加FontAwesome图标的资源数量。<inputstyle="f... 查看详情
如何制作一个图标在一个圆圈中旋转的菜单?
】如何制作一个图标在一个圆圈中旋转的菜单?【英文标题】:Howtomakeamenuwithiconsspinninginacircle?【发布时间】:2013-04-2314:18:11【问题描述】:我正在尝试为我的应用程序创建一个带有几个图标的菜单。用户应该能够旋转这个菜单... 查看详情
如何在项目中使用 Font Awesome 图标作为 ImageButton 的图标
】如何在项目中使用FontAwesome图标作为ImageButton的图标【英文标题】:HowtouseFontAwesomeiconsinprojectasaniconofImageButton【发布时间】:2021-03-1315:33:11【问题描述】:我在实现如何在我的Xamarin应用程序中使用FontAwesome图标时遇到问题,我... 查看详情
在 ReactJS 中添加到 Font Awesome 图标的链接
】在ReactJS中添加到FontAwesome图标的链接【英文标题】:AddlinktoFontAwesomeiconinReactJS【发布时间】:2019-12-0316:08:03【问题描述】:我使用Typescript+ReactJS,并尝试在字体真棒图标中添加链接。我的代码是这样的:importReactfrom\'react\';impor... 查看详情
在 CSS 中使用 Font Awesome 图标
】在CSS中使用FontAwesome图标【英文标题】:UseFontAwesomeIconsinCSS【发布时间】:2013-01-2202:08:57【问题描述】:我有一些看起来像这样的CSS:#contenth2background:url(../images/tContent.jpg)no-repeat06px;我想用来自FontAwesome的图标替换图像。无论如... 查看详情
在 Chrome 中刷新后 Font Awesome 图标消失
】在Chrome中刷新后FontAwesome图标消失【英文标题】:FontAwesomeiconsdisappearafterrefreshinChrome【发布时间】:2014-03-2311:19:05【问题描述】:引导版本3字体真棒版本3.2.1我在Chrome上遇到了bootstrap和fontawesome的问题。当我最初加载页面时,... 查看详情
用 font-awesome 将小图标堆叠在大图标上
】用font-awesome将小图标堆叠在大图标上【英文标题】:Stacksmalliconoveralargeiconwithfont-awesome【发布时间】:2015-07-0421:22:16【问题描述】:我正在尝试使用font-awesome创建一个圆形的“+”按钮。我附上了来自谷歌联系人的类似按钮的图... 查看详情
如何在 Laravel 6 中使用 Font Awesome 5 图标
】如何在Laravel6中使用FontAwesome5图标【英文标题】:HowtouseFontAwesome5iconsinLaravel6【发布时间】:2020-03-2515:41:12【问题描述】:我已经在我的package.json中安装了Fontawesome。"devDependencies":"@fortawesome/fontawesome-free":"^5.11.2",//etc.,"dependencies"... 查看详情
Font Awesome 5 在 React 中使用社交/品牌图标
】FontAwesome5在React中使用社交/品牌图标【英文标题】:FontAwesome5usesocial/brandiconsinReact【发布时间】:2019-03-1205:41:16【问题描述】:FontAwesome文档仅展示了如何向React添加常规/纯色字体。社交图标呢?首先我拿起包裹:npmi--save@forta... 查看详情
如何在 Bootstrap 4 中使用 Font Awesome 中的 svg 图标?
】如何在Bootstrap4中使用FontAwesome中的svg图标?【英文标题】:HowdoIusesvgiconsfromFontAwesomeinBootstrap4?【发布时间】:2019-04-2122:08:42【问题描述】:如何在Bootstrap4中使用FontAwesome5.5中的svg作为图标?我想在Bootstrap4中使用FontAwesome图标。... 查看详情
Android 在菜单项中使用 font-awesome 字体作为图标
】Android在菜单项中使用font-awesome字体作为图标【英文标题】:Androidusefont-awesomefontasiconinmenuitem【发布时间】:2017-03-1610:46:00【问题描述】:我刚刚学习安卓,很抱歉我缺乏这方面的知识。我主要作为Web开发人员工作,我们一直... 查看详情
在 ASP.NET MVC 中使用 Font-Awesome 图标填充 SelectList
】在ASP.NETMVC中使用Font-Awesome图标填充SelectList【英文标题】:PopulateSelectListwithFont-AwesomeIconsinASP.NETMVC【发布时间】:2021-12-0317:07:13【问题描述】:我已经用字体很棒的字符串填充了列表,例如:privatestaticreadonlyList<string>Icons=n... 查看详情
如何在 React 中使用 Font Awesome Icon?
】如何在React中使用FontAwesomeIcon?【英文标题】:HowdoIuseFontawesomeIconinReact?【发布时间】:2021-12-0204:09:14【问题描述】:我想在ReactJs中使用fontAwesome图标。我以前没有这样做过。我想在React中做一些类似home图标和Signout图标的事情... 查看详情
React App,在 React VS Vue 中使用 Font Awesome 品牌图标
】ReactApp,在ReactVSVue中使用FontAwesome品牌图标【英文标题】:ReactApp,UsingFontAwesomebrandiconsinReactVSVue【发布时间】:2019-05-0403:59:50【问题描述】:我正在尝试使用FontAwesome中的品牌图标,我之前已经在vue应用程序中使用过它,它与使... 查看详情
如何在 Nativescript Vue 平台中将 Font-awesome 图标添加到 tabview
】如何在NativescriptVue平台中将Font-awesome图标添加到tabview【英文标题】:HowtoaddFont-awesomeicontotabviewinNativescriptVueplatform【发布时间】:2019-06-0818:44:45【问题描述】:我正在尝试在TabView项目中使用字体真棒图标。我可以在页面的其他... 查看详情