font-awesome-5

{{#if currentUser}} with icon inside still rendered when user logs out

十年热恋 提交于 2021-01-27 19:52:37
问题 Thank you for reading my message, here is my problem : I'm using a navbar made with Bulma in which I display either login/register buttons or a profile picture icon from FontAwesome using {{#if currentUser}} as shown below ("S'inscrire" and "Se connecter" means register and login in French) : <div class="navbar-end"> <div class="navbar-item"> <div class="buttons"> {{#if currentUser}} <!-- Displayed only when the user is logged in--> <i class="fas fa-user icon is-large" id="userProfile"></i> {

font awesome - stack circle color change on hover

不问归期 提交于 2020-12-15 06:42:26
问题 I am using the font awesome framework for the icons. .fa-circle { color: red; } .fa-times { color: #fff; } .fa-circle:focus, .fa-circle:hover { color: #fff; border: 2px solid black; } .fa-times:focus, .fa-times:hover { color: red; } <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css"> <span class="fa-stack fa-lg"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-times fa-stack-1x"></i> </span> The above image is for the normal state. On hover or focus

font awesome - stack circle color change on hover

只谈情不闲聊 提交于 2020-12-15 06:41:43
问题 I am using the font awesome framework for the icons. .fa-circle { color: red; } .fa-times { color: #fff; } .fa-circle:focus, .fa-circle:hover { color: #fff; border: 2px solid black; } .fa-times:focus, .fa-times:hover { color: red; } <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css"> <span class="fa-stack fa-lg"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-times fa-stack-1x"></i> </span> The above image is for the normal state. On hover or focus

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

雨燕双飞 提交于 2020-11-24 20:12:45
问题 I'm trying to put some Font Awesome icons over a div element, making it look like a circle that contains the icons. There are in total three icons inside a circle each, and all the circle have to be next to each other. But when I try to do it the icons are not positioned correctly and the circles move out of place. I don't know what I'm doing wrong. .python { width: 200px; height: 200px; display: inline-block; border-radius: 50%; margin-left: 183px; background-color: lightblue; } .fa-python{

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

本秂侑毒 提交于 2020-11-24 20:01:00
问题 I'm trying to put some Font Awesome icons over a div element, making it look like a circle that contains the icons. There are in total three icons inside a circle each, and all the circle have to be next to each other. But when I try to do it the icons are not positioned correctly and the circles move out of place. I don't know what I'm doing wrong. .python { width: 200px; height: 200px; display: inline-block; border-radius: 50%; margin-left: 183px; background-color: lightblue; } .fa-python{

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

时光怂恿深爱的人放手 提交于 2020-11-24 19:58:53
问题 I'm trying to put some Font Awesome icons over a div element, making it look like a circle that contains the icons. There are in total three icons inside a circle each, and all the circle have to be next to each other. But when I try to do it the icons are not positioned correctly and the circles move out of place. I don't know what I'm doing wrong. .python { width: 200px; height: 200px; display: inline-block; border-radius: 50%; margin-left: 183px; background-color: lightblue; } .fa-python{