I've come across many ways to solve this using Font Awesome < 5, but I can't seem to solve this in any way using Font Awesome 5.
This is how many resources point to adding a Font Awesome icon in placeholder text.
<input style="font-family:FontAwesome !important" type="text" placeholder="">
Remember to not use the general "Font Awesome 5" font family, you need to specifically end with the branch of icons you're working with. Here i am working the "Brands" category.
<input style="font-family:'Font Awesome 5 Brands' !important" type="text" placeholder="">
For a more sophisticated solution you could implement a class that works specifically on the placeholder text of a class like this and add that class to you input. Useful if you want a different font-family on your input values.
.useFontAwesomeFamily::-webkit-input-placeholder { /* WebKit, Blink, Edge */
font-family: "Font Awesome 5 Brands" !important;
}
.useFontAwesomeFamily:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
font-family: "Font Awesome 5 Brands" !important;
}
.useFontAwesomeFamily::-moz-placeholder { /* Mozilla Firefox 19+ */
font-family: "Font Awesome 5 Brands" !important;
}
.useFontAwesomeFamily:-ms-input-placeholder { /* Internet Explorer 10-11 */
font-family: "Font Awesome 5 Brands" !important;
}
.useFontAwesomeFamily::-ms-input-placeholder { /* Microsoft Edge */
font-family: "Font Awesome 5 Brands" !important;
}
.useFontAwesomeFamily::placeholder { /* Most modern browsers */
font-family: "Font Awesome 5 Brands" !important;
}
And then add this class to your tag.
<input class="useFontAwesomeFamily" type="text" placeholder="">
This might help someone out there as I had the same issue.
The Branch for Regular icons is Font Awesome 5 Free. However, if you need to use solid icons, just add the font-weight: 900; property to the inline CSS.
<style="font-family: Circular, 'Font Awesome 5 Free' !important; font-weight: 900;">
The placeholder text will be bold, I'm still trying to find a solution for this, I don't know if there's another way but it works for me for now.
I hope it helps.
You can also the fas class to the input.
Just bear in mind that this solution and any font-awesome style changing solutions will also change the style of any text preceding or following the unicode icon.
Remember to add class "fas fa-search" to the input
Related
The default Vuetify font family is Roboto and I would like to change this. I found other solutions that changes the font family globally. I don't want to change it globally, I only want to change it for a specific element. How to do this?
<template>
<v-container>
<div class="text-h4">Text family I want to change</div>
<div class="text-h6">Text family I dont want to change/give another font family</div>
</v-container>
</template>
Update
Vuetify declares the font on .v-application and unfortunately also declare the font as !important on .v-application .text-hN. I can suggest you some ideas to modify your font:
If you want to change every text-h4: You can override the style of text-h4 by modifying its default ($headings then
'h4') https://vuetifyjs.com/en/features/sass-variables/#example-variable-file
If you want to keep default text-h4: You can remove the text-h4 class and use your own class custom-header with copied rules of text-h4 plus your font-family rule. You won't need higher specificity, nor to use !important.
Something like:
.custom-header {
font-size: 2.125rem !important; /* from .text-h4 */
line-height: 2.5rem; /* from .text-h4 */
letter-spacing: .0073529412em !important; /* from .text-h4 */
font-weight: 400; /* from .text-h4 */
font-family: YOUR_FONT_FAMILY, Roboto, sans-serif;
}
Previous answer
Give your element another class:
<div class="text-h4 anotherClassForExample">Text family I want to change</div>
Override the font-family of this new class in your css.
I was in a similar position before, I had some basic css knowledge and started using frameworks. I strongly recommend you to master CSS before using a UI framework. Starting by using a framework looks faster, shinier and easier but in the long term it is not. You will be blocked a lot and maybe in the future you will change to another one or even want to not use any.
I'm trying to change the CSS feature vue-intro tutorial for my web app. I'm having trouble with how to change the tooltip button color, themes in vue-intro.js.
I want to change Next button color. so, how to change CSS in nuxt.js project.
I added the below code as a plugin. but I can't change the CSS
import Vue from 'vue'
import VueIntro from 'vue-introjs'
import 'intro.js/introjs.css'
Vue.use(VueIntro)
Here's an SCSS utility to generate the CSS for it:
$btn-color: #f50;
$text-color: white;
a.introjs-nextbutton {
background-color: $btn-color;
border-color: darken($btn-color, 4.2%);
text-shadow: none;
color: $text-color;
&:hover {
background-color: lighten($btn-color, 4.2%);
border-color: $btn-color;
color: $text-color;
}
&:focus {
box-shadow: 0 0 0 0.2rem transparentize($btn-color, .42);
background-color: $btn-color;
border-color: darken($btn-color, 4.2%);
color: $text-color;
}
}
I have done something similar before. I think the only way to do it is to overwrite the className or not import the intro.css (make your own). You need to "inspect element" to find out the introJS className from the library. Basically their className start with prefix introjs-something.
I can even do things like display none for previous button or change its color. See picture below.
Click this to see My Inspect Element to find introjs classes
Other tool working except the bold, When I click bold my text still not get bold? I work on materialize. Can anyone help me?
Thanks in advance.
I fixed the issue with css, the css must be placed after the materializecss
.ql-editor strong{
font-weight:bold;
}
I needed an ::ng-deep (or /deep/ ) in front of my style to get it working:
::ng-deep .ql-editor strong{
font-weight: bold;
}
I was facing the same issue.
Use strong { font-weight: bold !important; } in styles.scss and it will solve the problem.
The font size on the charts are to small and hard to read on certain colors. Is there a way to change these attributes?
I can do this do make the whole pie red but setting color or font-size doesn't make a change:
.ct-series-x .ct-slice-pie {
fill: #f05b4f
}
<div class="ct-chart ct-golden-section ct-series-x ct-slice-pie" id="chart2"></div>
For anyone who comes across this - override ct-label in your css file:
.ct-label {
font-size: 15px;
}
I've seen this a few times, only on Webkit. The scenario is that you have some text with a hover color, and it's using a webfont custom font. When you hover, part of the furthest right letter is not getting the hover color. To see what I mean, view this fiddle in Chrome or Safari, and look carefully at the "r" at the end of the text while hovering with your mouse, it is not completely red.
http://jsfiddle.net/jaredh159/xPZB8/
HTML from fiddle:
<a>Some Text Foo Bar</a>
CSS from fiddle:
#font-face {
font-family: 'stephanie_marie_jfregular';
src: url('stephanie-marie-jf-webfont.eot');
src: url('stephanie-marie-jf-webfont.eot?#iefix') format('embedded-opentype'),
url('stephanie-marie-jf-webfont.woff') format('woff'),
url('stephanie-marie-jf-webfont.ttf') format('truetype'),
url('stephanie-marie-jf-webfont.svg#stephanie_marie_jfregular') format('svg');
font-weight: normal;
font-style: normal;
}
a {
font-family: stephanie_marie_jfregular;
color: #000;
font-size:50px;
}
a:hover {
color: #ff0000;
}
What is this? Fixable? Is it just the case of a poorly created web-font file, or a bad font? Any one familiar with this issue or have a workaround?
The reason the right few pixels arent't given their :hover color is because they run outside the a container. Inspect it or give it a background color and you can see this. A workaround is faking the extra space by giving the a some extra padding-right.
I'm not sure how exactly the glyph is able to run outside the container, so I'm be interested if anyone else knows. For now I'm sharing celeriko's suspicion that this font's metrics are borked.
EDIT: Turns out it's the font's side bearings that allow for the glyph to run outside its bounding box. This is common with brush script fonts and allows individual letters to connect by slightly overlapping eachother. So it's a valid property of the font, unfortunately causing a problem the original typographers didn't have to account for — no hover states on paper ;)