I have a requirement to create an icon as shown below.
I have tried as shown below.
.html
<ion-content padding>
<div style="background:lightblue;width: 50px;height: 50px;border-radius: 50%;">
<ion-icon name="heart"></ion-icon>
</div>
</ion-content>
Plunker is here
Q1: Is this the correct approach to create this kind of icon appearance?
Q2: How can I make it same as above image?
Q3: After that, I need to use that icon any place on any component.If I use margins to center the heart icon, hope it'll not work on any place no? In other words, I need to use it as a single unit.
Hope you'll give a feedback for this.
.heart-icon {
background: lightblue;
width: 50px;
height: 50px;
border-radius: 50%;
line-height: 50px;
text-align: center;
color: #FFF;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class="heart-icon">
<i class="fa fa-heart" aria-hidden="true"></i>
</div>
Hope it is what you want to achieve. You can use ionic icon instead of font awesome.
scss
.heart-icon {
background: lightblue;
border-radius: 50%;
color: #FFF;
}
and for HTML
<ion-icon class="heart-icon" name="heart" item-start></ion-icon>
Related
I'm using WordPress. The designer put a WhatsApp button that shows on the entire website. Any idea where I can find that snip of code to remove it? I checked the plugins, and I'm sure it is not a plugin.
This is what I see when I inspect the element. Any help please?
<div id="whatsapp_desktop" style="
position: fixed;
display:none;
z-index: 5;
left: 11px;
width: 100%;
height: 50px;
bottom: 40px;
">
<i class="fab fa-whatsapp" style="font-size: 50px;color: #3bc5aa;margin-right: 10px;"></i>
</div>
You must use important:
display:none!important;
I am trying to make a website in local using React.
It is my codes, I surrounded those two elements with a div tag and applied border css looking like related elements, but when I applied a Link tag to go to another page to the div elements, the border started not surrounding under the element. In shortly, how can I use the css file that before apply Link tag?
Here is my code.
div{
border: 1px black solid;
width: 250px;
height: 300px;
}
.p {
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<Link to='/tests/'>
<div>
<i class='fas fa-check fa-5x'></i>
<p>take tests</p>
</div>
<Link>
You have to add a class to the div and fix your CSS.
.tests{
border: 1px black solid;
width: 250px;
height: 300px;
}
.p {
text-align: center;
}
The jsx
<Link to='/tests/' style={{ textDecoration: 'none' }}>
<div className="tests">
<i class='fas fa-check fa-5x'></i>
<p>take tests</p>
</div>
<Link>
I am trying to put the logout button at the left toolbar , i have done it by position but it is not reponsive nd by smalling the chrome this button disappers , i have tried margin also but of no use!! How can I do it ??
My HTML
<div class="user-button-container at-xl-12 "#userButton>
<button class="user-button " md-button [mdMenuTriggerFor]="menu">
<div fxLayout="row" fxLayoutAlign="start center">
<at-icon class="at-display-block"backgroundColor="purple" backgroundType="border"size="40px" fontSize="30px"></at-icon>
<span class="name" fxHide="true" fxHide.gt-sm="false"></span>
<md-icon></md-icon>
</div>
</button>
</div>
My CSS
.user-button-container {
height: 100%;
font-weight: 400;
.user-button {
height: 100%;
border-radius: 0;
position: relative;
left: 1050px;
md-icon {
font-size: 16px;
width: 16px;
height: 16px;
}
.name {
margin: 0 8px 0 10px;
}
} }
looks like you have the design specified for xl-format, but not for smaller formats. as far as I know you should always start from small (xs) to large (lg) and not the other way around. so maybe just changing the following could help:
div class="user-button-container at-xs-12 "#userButton>
instead of
div class="user-button-container at-xl-12 "#userButton>
if you are using bootstrap use following class for desktop or mobile
<div class="user-button-container col-md-12 col-xs-12">
</div>
also, it appears you are not closing your css items - make sure you are using {}
I am wondering how the special text box in readthedocs.org is made.
For instance in:
I think there is much more than tweaking the css file, and I would really like to create one on my own.
Thanks in advance!
EDIT: I know the overall box comes from the note directive. However, my question is: how do they make this "!" mark? I cannot find the clue in the css file.
It's an FontAwesome icon
div {
background-color: skyblue;
padding: 3px 10px;
}
.fa-exclamation-circle {
color: white;
}
span {
color: white;
margin-left: 6px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet" />
<div>
<i class="fa fa-exclamation-circle" aria-hidden="true"></i>
<span>Note</span>
</div>
I'm using this toggle menu template: http://bootsnipp.com/snippets/featured/navigation-sidebar-with-toggle .
I have replaced bootstraps glyphicon with font awesome's
fa fa-cog fa-spin
but the cog is spinning out of boundaries as if the center is not on the same line as the text. I can see that there is some issue with thesizing, but I cannot figure out where, any idea what am I doing wrong?
JSFiffle: https://jsfiddle.net/vidriduch/mpw2r8h2/1/
You have a problem in the text indent
.sidebar-nav li {
line-height: 40px;
text-indent: 20px; //Remove this rule and use margin
}
And change this class rules
.sub_icon {
float: right;
margin-right: 10px;
margin-top: 10px;
padding-right: 65px; // remove it
padding-top: 10px;// remove it
}
I finally found how to fix it :
You have to align the icon.
<i style='text-align: center;' class='fa fa-cog fa-spin' ></i>
For me it worked to just add 2px padding to the top.
<i className="far fa-lg fa-spin fa-cog" style="padding-top: 2px" />
Inspect the image tag. The CSS padding-right caused all the issues for me.
I solved this using flexbox, had a similar problem.
Just add:
text-align: center;
display:flex;
align-items: center;
justify-content: center;
Also, because your code is aligned to the left, you will have to add margin-right: (pixels); to align it according to your code.
For me, it just needs
display: flex;
align-items: center;
Eg:
<div class="row">
<label class="col-3">Label col</label>
<input class="col-3 form-control" />
<i class="fa fa-spinner fa-spin " style="display: flex; align-items: center;"></i>
</div>
note: I use bootstrap