I use a font-based iconset (in my case font-awesome 4.7 icons) which is used like this:
<i class="fa fa-eye"></i>
What I would like to do is to overlay a triangle in the lower right corner so that it would look similar to the fa-eye-slash icon.
Is it possible to add a css class (like <i class="fa fa-eye bottom-right-triangle"></i>) which overlays a triangle and thus obscures half of the icon?
You can try something like this using linear-gradient and pseudo element as an ovrelay:
.hide {
position:relative;
}
.hide:after {
content:"";
position:absolute;
bottom:0;
left:0;
right:0;
top:0;
background:linear-gradient(to bottom right,transparent 50%,#fff 50.5%);
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<i class="fas fa-eye fa-5x hide"></i>
Related
I am working on Servicenow service portal where i created a custom icon-link widget that displays the image as glyph icon.
I almost got everything but my image is stylying as-is comparing to glyph icon.
/* CIRCLE ICON ---------- */
a.circle_icon {
display: block;
padding: 20px 0px 20px 70px;
position: relative;
}
a.circle_icon .fa {
position:absolute;
left: 0px;
top: 10px;
}
/* Image Circle ------- */
a.image_icon {
display: block;
padding: 20px 0px 20px 70px;
position: relative;
}
a.image_icon .fa {
position:absolute;
left: 0px;
top: 10px;
}
<!--// Circle Icon -->
<a ng-if="::(options.link_template == 'Circle Icon')" ng-href="{{::data.href}}" class="circle_icon {{::options.class_name}} text-{{::options.color}}" target="{{::data.target}}">
<span class="fa fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-{{::options.glyph}} fa-stack-1x fa-inverse"></i>
</span>
<h2>{{::options.title}}</h2>
<span class="text-muted">{{::options.short_description}}</span>
</a>
<!--// Image Icon -->
<a ng-if="::(options.link_template == 'Image Icon')" ng-href="{{::data.href}}" class="image_icon {{::options.class_name}} text-{{::options.color}}" target="{{::data.target}}">
<span class="fa fa-stack fa-2x">
<img src="{{data.target}}"/>
</span>
<h2>{{::options.title}}</h2>
<span class="text-muted">{{::options.short_description}}</span>
</a>
With this code my output looks like this.
Click here
Circle Icon is Out of the box and Image icon is my custom code. I want the aeroplance image looks same as above Get help and Community icon.
I have a few followup questions for you.
1.What is the reason for creating a new widget? (Instead of using Icon link OOB widget)
I'm assuming you wanted to have a custom image in place of the
bootstrap icon.
if yes there is an alternate solution without cloning also you can use your custom image. (Using page in designer add a class, Write style[custom image css] and that's it, without cloning its possible)
2.With the OOB Icon link widget, you can do that with instance options, if you cloned the OOB Icon link widget you can go to instance options add modify,
How to do that?
Right-click on the widget, go to instance options.
scroll to the bottom last field Template has the option as 'Circle icon'
Save and done (Please refer to screenshots attached below)
I have some font awesome icons that I want to change to a different color but for some reason it will not work. Here's my html and css:
HTML
<span><i class="fas fa-globe fa-5x change-color"></i></span>
CSS
.change-color {
color: #3993e5 !important;
}
I fixed it.
I just had to wrap the icon with a div
<span><div><i class="fas fa-globe fa-5x change-color"></i></div></span>
Will if you using the js file from FontAwosem you should know that this I HTML tag will be removed and replaced with SVG tag so all you need to do is say something like that in your CSS file
svg {
color: white;
}
Be sure that your icon font-family is Font-awesome.
.change-color {
font-family:FontAwesome;
color:red;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<a class="btn-cta-freequote" href="#">Get a FREE Quote <i class="fas fa-globe fa-5x change-color"></i></a>
I'm using the Unicode Character 'MEDIUM BLACK CIRCLE' aka:
⚫
and then changing its color. It works fine on most of my devices, but on my android phone and some collegues PC's (same pc brand and browser) it is always black and not #009FDA.
<span style="color:#009FDA;">⚫ </span>
How do solve this?
Solved!
solution(font-awesome):
<i class="fa fa-circle" style="color:#009FDA;" aria-hidden="true"></i>
I'm still very interested in why this happend if anyone knows..
You have 2 options
Option 1:Unicode charecter
Use Unicode charecter. it works
body{
font-size:15px;
line-height:15px;
}
<span style="color:#009FDA; ">⚫ </span>
<br/>
<span style="color:#009FDA; font-size:250%; height:15px; ">•</span>
Option 2:Shape round using border-radius (works fine in all browsers)
Class for circles which has border-radius:50%; and same width & height
span.circle{
height:10px;
width:10px;
border-radius:50%;
background-color:#009FDA;
display:inline-block;
}
<span class='circle'></span>
Other options: You can use Font-awesome, svg or images
I want to resize the social icons on the top header of this website http://petlet.net.au/
I thought that the logo's are images but I think these logos are from a library or from external because when you inspect the code there's no <img src> code.
This is the code:
How can I resize the social icons?
Use fa-2x, fa-3x, fa-4x, or fa-5x classes.
<i class="fa fa-facebook-square fa-lg"></i> //smallest
<i class="fa fa-facebook-square fa-2x"></i>
<i class="fa fa-facebook-square fa-3x"></i>
<i class="fa fa-facebook-square fa-4x"></i>
<i class="fa fa-facebook-square fa-5x"></i> //biggest
Whenever icons are used as svg icons you can resize them by just changing font-size. They can be colored, not colored, multiple shapes, sizes, whatever.
.header .fa {
font-size: 15px; // you can increase or decrease font size as per your needs.
}
.header .fa-facebook-square {
font-size: 18px; // you can change font-sizes of different icons indiviually
}
Using font-size css property you can resize the font-awesome fonts.
Try this:
.top-header-content a{
font-size:20px;
}
For newer version use icon-2x, icon-3x etc.
<i class="icon-camera-retro icon-4x"></i>
Refer http://fontawesome.io/3.2.1/examples/
Just use font-size property of CSS to resize the social icon buttons
I am using bootstrap & font awesome, and i am looking to make something like this:
I have this:
I want something like this:
Markup:
<div class="alert alert-success"><i class="fa fa-paperclip icon-alert"></i> Everything was edited!</div>
CSS:
.icon-alert {
font-size: 30px;
float: left;
margin-right: 10px;
opacity: 0.7;
}
You'll need to set a height to the container and then you can hide the overflow of the nested font-awesome icon, using overflow:hidden.
CSS:
.clipped-alert{
overflow:hidden;
height:55px;
}
HTML:
<div class="clipped-alert alert alert-success">
<i class="fa fa-paperclip fa-5x icon-alert pull-right text-success"></i>
Everything was edited!
</div>
DEMO
You would create a container around the icon that has the property of over-flow: hidden;
You can then position the element inside however you want.
http://jsfiddle.net/MathiasaurusRex/W9WC2/1/