I wanted to use font-awesome with vuetify instead of the material icons they use as default, however the font-awesome icons are all very big and look clunky with the vuetify components, is there a way to make them smaller overall, maybe with font-size or something?
This is an example of what I mean, the icon on top is ok but the password eye looks terrible so big.
In this case of the eye icon I can't resize it like I normally could, because of the way it's set up. They are just called in the v-text-view, so I can't set up a font size or anything.
<v-text-field
v-model="form.password"
:rules="rules.passwordRules"
label="Password"
:append-icon="show ? 'fas fa-eye fa-xs' : 'fas fa-eye-slash fa-xs'"
:type="show ? 'text' : 'password'"
#click:append="show = !show"
clearable
required></v-text-field>
font-size should work:
.fas {font-size: 16px;}
Related
I installed triggered scrollbox and it's working but text box where you have to write your e-mail has white background and white font(font for whole theme is white). SO i would like to change it to any other color.
Thing is that i can't acces CSS to change it so i have to do it somehow in HTML but i don't know how.
This is the code:
[gravityform id="9" title="true" description="true"]
So question is how can I modify this gravity form code that change color of font?!
Vital information: other solutions can't help(CSS, etc.) bcs wordpress there is bought and it's pretty limited so i'm looking for a solution in HTML that can be implemented particulary in this line code.
You can set styles for input element in your HTML like this:
<input style="color: pink !important; background-color: black !important">
May be you need (may be not) to add !important to your styles to overwrite existing ones.
You can install plugin for custom css and add your custom css there to overide gravity form css.
Here is one simple plugin to do that: Cssor
Write the below css in your style.css
input{
color: #000; // if it is not applying, use ! important
}
It works for all input boxes
I try the icon glyphicon glyphicon-chevron-right for showing the direction in my design but I need some thin than default size.
So how to reduce the thickness of default bootstrap icon of glyphicon glyphicon-chevron-right
My code was:-
<div style="color:#FFF;">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
</div>
The current bootstrap has more icons including a thinner arrow called glyphicon-menu-right.
You could always look for an alternative icon font. There are literally dozens out there - some for free. Or hire someone to create the icons you need. Or do it yourself, for example with FontForge.
You can alter css of all bootstrap glyphicons very easily. Like in this case font-size and font-weight of classes .glyphicon & .glyphicon-chevron-right can be reduced to your desired size
I try to find a solution for this too. I will search for something better, but until now I replaced the icon with .fa-chevron-down that is a little thinner than .glyphicon-chevron-right.
Just set width and heigth properties for your icon. But be sure that you change your icon dimensions in proportion one to dimension to other
I am using a large png sprite for icons within my application. These icons are all grey, and consist of transparent backgrounds. Is there a way that I can colorize them with CSS? I tried webkit filters, but that seems to only work with an img.
The HTML
<div class="icon iconPencil"></div>
The CSS
.icon {float:left;width:16px;height:16px;background: url('../../images/interface/icons_x2.png') no-repeat 0 0;background-size: 1424px 1424px;}
.icon.iconPencil {background-position:-96px -32px;}
In the example above, I would like to colorize the cog icon, which is part of my sprite, and has a transparent background.
if you want to use images then I would point to the answer by Sutherland about svgs using css tricks. If you want to use font icons then I would use http://fortawesome.github.io/Font-Awesome/icons/ . All you have to do is copy and paste their link into your head and then you can use their list of icons. You can change the color of each icon like you would text on your website.
example of styling after adding link to the head of your html page:
/* CSS */
i.fa-cog {
color:#333;
}
<!-- HTML -->
<i class="fa fa-cog"></i>
I have used font awesome icons in several projects and it is great.
you can't do this with png's you'll need to use svg's instead https://css-tricks.com/svg-sprites-use-better-icon-fonts/
It is not possible to achieve what you want. Best to use the following css and font toolkit. Its very easy to use this library and its constantly updating with new icons.
http://fontawesome.io/
<i class="fa fa-cog" style="color: red"></i> My Cog
Here is a JSFidde-
http://jsfiddle.net/costh/nuLvr4ue/
As Hayden and Charlie say, your best bet is to use icon fonts. But this is not limited to font awesome, you can use any Unicode
div:before {
content: '\2605';
color: red;
}
<div>text</div>
You can look for unicode chars here
I have downloaded font-icon from flaticon.com
to change font-icon color we can use css like this:
.flaticon-baby23:before {
content: "\e000";
color:red;
}
to change size we use this:
.flaticon-baby23:before {
content: "\e000";
font-size:15px;
}
Is ther any method to change shape of font-icon like given in the picture i found those from here is webiste
Those are various shape
how do i change icon shape???
my style
The way those icons are changing "shape" is that the border radius, background, and drop-shadow is being applied to them. The icon itself (the twitter bird) is not changing.
Depending on what you are trying to do, you might be able to do the same.
If you are trying to get the edges of the phone font icon to be rounded, that is not possible unless you find one that has that already. If, instead, you are trying to create a background for your icon similar to the twitter icons you showed, style the font icon with a border-radius, background-color and drop-shadow.
better download other font-icon packs or use background radious method
I am using two characters from Zurb Foundation Icon Font 3 (the pricetag and the garbage can). I notice they have a lot of space above and below and that is making my div taller than it needs to be.
Here's a fiddle.
<div style='font-size:20px'>Hi <i class='fi-price-tag' style='font-size: 64px'></i></div>
I'd like to find a way to make the span less tall. I imagine I'd like to cut off part of the character (namely the blank spaces at the top and bottom). I'd rather not disrupt the positioning of the character, though I can use relative positioning to fix that if I need to.
EDIT Changed it to reflect div, not span.
EDIT : In part because of this issue, I switched from Zurb Icons to font-awesome. I'll still follow this question in case anyone gets it, for the sake of anyone searching for this in the future.
I set line-height:0px and manged to reduce it,
here's the modified code
<div style='font-size:20px; background-color: #ddd;'>Hi <i class='fi-price-tag' style='font-size: 64px;line-height:0px'></i></div>
The size of the price icon is controlled by the font size, so you just need to reduce the font to 20px like the text to make it smaller.
Here is the correction
<div style='font-size:20px; background-color: #ddd; height:54px;Display:block'>Hi <i class='fi-price-tag' style='font-size: 64px;margin-top:-10px;display:inline-block'></i></div>