I'm using Ionicons (http://ionicons.com/) and I'm new to css. I'm wondering whether it's possible to overlay a banner that states 'new' over the top right corner of the Icon.
Is there an easy/standard way of doing this? (either to a ionicon or a favicon)
Thanks!
Just add the following new class to any icon that you want:
.new:after {
content: 'new';
position: relative;
top: -10px;
left: -2px;
background-color: tomato;
font-size: xx-small;
}
You can change the color and position and add any other style as you wish.
.new:after {
content: 'new';
position: relative;
top: -10px;
left: -2px;
background-color: tomato;
font-size: xx-small;
}
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
<i class="ion-ios-flask new"></i>
Related
I have an image with an icon on top if it:
<font-awesome-icon class="icons bookmark" icon="fa-solid fa-bookmark"></font-awesome-icon>
<img :src="images[0]" #click.native="visit(l._id)" />
But on mobile devices, it ALWAYS clicks the image behind the icon. Is there a way to prevent this?
Here are my CSS classes:
<style scoped>
img {
border-radius: 25px;
margin: 8px;
width: calc(100% - 50%);
}
.icons.bookmark {
font-size: 1.5em;
z-index: 100;
position: absolute;
top: 20px;
left: 1em;
}
.icons.bookmark:hover {
color: green;
}
</style>
here it is on the image:
Set pointer-events: all on the icon. Check it out on the mdn web docs.
I am not sure if this will solve your problem, because you said it only fails on mobile devices, but give it a try.
I have been toying with this for hours and decided to ask. I am trying to replace my checkboxes with Font Awesome icons within a circle div. When the checkbox is checked the circle color is supposed to change.
I have managed to get the icons to replace the checkboxes, but I can not get the background to change when selected. I personally think I over thought this and it could probally be done much simpler, but this is what I have.
HTML:
<div class="actions thread-actions">
<div class="checkbox visible">
<button class="action primary-action visible" title="$vbphrase[save_changes]">
<label for="cb_visible"><input type="checkbox" name="visible" value="yes" id="cb_visible" checked /></label>
</button>
</div>
</div>
CSS: (SCSS)
$brand-success: #5cb85c !default;
$brand-danger: #d9534f !default;
.thread-actions .checkbox {
input[type=checkbox] {
position: absolute;
margin-left: -100em;
margin-right: 100em;
font-size: 1em;
}
input[type=checkbox]:before {
position: absolute;
left: 99em;
}
}
/* Colors ---------------------- */
.thread-actions input[type=checkbox]:checked {
color: $brand-success;
}
.thread-actions {
input[type=checkbox]:before {
font-family: 'FontAwesome';
}
}
.thread-actions {
.checkbox.visible input[type=checkbox]:before {
content: "\f023";
margin: -22px 0px 0px 17px;
}
.checkbox.visible input[type=checkbox]:checked:before {
content: "\f023";
background-color: #ff0000;
/* f3c2 */
}
}
.actions .action {
font-size: 26px;
border: 0;
border-radius: 50%;
height: 48px;
width: 48px;
position: relative;
}
How can I achieve this effect?
I have a live PEN here where I have been playing with this.
After starting from scratch and re-thinking this through, I managed to come up with a solution.
Instead of enclosing the input with pointless divs, then trying to style each div I worked with only the input.
To achieve this effect, start by pushing the standard checkmark out of the way:
input[type=checkbox] {
font-family: 'FontAwesome'; // tell this element to use FA
position: absolute; // absolutely push this thing away
margin-left: -100em; // buh bye checkmark
font-size: 26px; // FA icon size
}
With the checkbox out of the way we can move on to styling as we wish:
input[type=checkbox]:before {
left: 100em; // where the checkmark should have been
border-radius: 50%; // circle
position: absolute; // we want it absolutely where we placed it
text-align: center; // FontAwesome icon alignment
height: 40px; // height of the circle
width: 40px; // width of the circle
background-color: #337ab7; // circle color
color: white; // icon color
content: "\f070"; // FA icon
}
With this as a base we can move on to styling our checked boxes by simply overriding our base style:
input[type=checkbox]:checked:before {
content: "\f06e"; // FA icon
background-color:#be0000; // circle color
}
Sometimes going back and rethinking things helps, hope this helps someone =)
Here is a live preview of the end result.
I have a button with span included which then has a pseudo-selector, :before applied to it in some cases.
When the element (button) receives focus, the :before is also receiving focus and the focus ring, resulting in something like this:
While I'd like to keep the focus ring on the button itself, I'm having a difficulty removing it from the contained :before element. See this JSFiddle:
https://jsfiddle.net/uhgsj6cp/3/
The HTML/CSS is fairly basic:
.btn {
width: 100px
}
.btn>span {
position: relative;
}
.btn>span:before {
display: block;
content: '•';
font-size: 32px;
position: absolute;
left: -13px;
top: -13px;
}
<button class='btn btn-default'>
<span>Text</span>
</button>
Reduce the line-height then hide the overflow:
.btn {
width: 100px
}
.btn>span {
position: relative;
}
.btn>span:before {
/*display: block; not need*/
content: '•';
font-size: 32px;
position: absolute;
left: -13px;
top: 0;
overflow:hidden;
line-height:0.4;
}
<button class='btn btn-default'>
<span>Text</span>
</button>
I was able to ALMOST remove that artifact outline with adjusting line-height and top on the pseudo element.
However, you could also try using the HTML • to produce the bullet within the button.
Im using font awesome CSS to display the plus circle on a dropdown, I want to change it to minus when the drop down is expanded and vice versa..
Any examples might help...thanks
You can create a div to place in your dropdown, giving it the class of "more-icon", which will toggle to "less-icon" (this example requires a relative positioned parent)
.more-icon:after {
content: "+";
display: block;
position: absolute;
right: 10px;
top: 10px;
color: #373534;
font-size: 30px;
font-weight: 900;}
.less-icon:after {
content: "-";
width: 17px;
height: 4px;
display: block;
position: absolute;
right: 10px;
top: 15px;
background: #373534;
font-size: 30px;
font-weight: 900;}
Then, use some jquery to toggle the div between classes on your open and collapse for the dropdown:
$('.more-icon').toggleClass('less-icon');
You could use a short interval to check if the dropdown is open or closed, then change the font awesome class.
jsFiddle: http://jsfiddle.net/ukdesignservices/kxvnqee3/
var intvl = setInterval(function() {
if ($("#dropdownMenu1").attr("aria-expanded") == "true") {
$("#change-this").children(".fa-stack-1x").removeClass("fa-plus").addClass("fa-minus")
} else {
$("#change-this").children(".fa-stack-1x").removeClass("fa-minus").addClass("fa-plus")
}
},10);
Dropdown code from: http://getbootstrap.com/components/#dropdowns
I am currently working on my share buttons and I am trying to make them act like the share buttons on YouTube do, when a:hovered a span elemental appears with a text "Facebook/Twitter/RSS" etc.
The span element width should be auto since "Facebook" and "RSS" contains a different amount of letters, and I don't want to set a fixed width.
I want the span element to appear in the "middle" of it's current element, check the youtube share buttom for a hint.
I have come this far, see: http://jsfiddle.net/Kz2n2/
try this:
<span title="share">share</span>
css:
.tooltip{
display: inline;
position: relative;
}
.tooltip:hover:after{
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 100%;
}
.tooltip:hover:before{
border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}
working jsfiddle:
demo
With jQuery UI Tooltip you can make tooltips for your social icons.
Check out the following example, here is the jQuery UI Tooltip implemented.
$('.tooltip').tooltip();
The title tag on your <a href='#'>` is used as the text for your tooltip.
#<span>RSS.</span>