I don't know if this is possible, what I am looking for is a way to change a specific character font, for example, I want to make this button:
the text has "calibri" font in css, something like this:
input[type="button"]{
font-family: calibri;
}
And I need to use "icomoon" font for the last character, so my HTML should look like this:
<input type='button' value="Move to right <span class=icomoon>x</span>" />
But I think this is not possible, other ways could be using soms CSS pseudos like ::after or :first-letter, but I can not figure them out.
So, the question is: It is possible to change the last character of a HTML button using css?
You can use multiple font-family then consider using the code of the icon you want to use.
Here is an idea using font-awesome:
input[type="button"]{
font-family: calibri,'Font Awesome 5 Free';
font-size:20px;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
<input type='button' value="Move to right " >
Instead of inserting a span inside the value of an input, you can just use a button element,
<style>
.button {
font-family: "OriginalFont";
}
.icomoon {
font-family: "icomoon"!important;
}
</style>
<button class="button">
Move to Right <span class="icomoon">x</span>
</button>
Related
I am using Persian language and I have developed two ways to display my button in Bootstrap 3.3.6:
For the upper I have used this code:
<div class="row text-center">
<button type="button" id="submitFace" class="btn btn-primary"> <h4><font face="B Nazanin">
خواندن اطلاعات چهره
</font></h4></button>
</div>
And for the lower I have used this code:
//--------in the CSS-------
#font-face{
font-family: myFirstFont;
src: url("../myFonts/BNAZANIN.TTF");
}
.myButton{
font-family: myFirstFont;
font-size: large;
font-weight: bold;
}
//---------in the HTML-------
<div class="row text-center">
<button type="button" id="submitFace" class="btn btn-primary myButton">
خواندن اطلاعات چهره
</button>
</div>
However, as you see in the picture when I use CSS the result has not a good sharpening. I mean border of the text is not clear, if you look closely you see that the text of the button is slightly blurred.
I have found that even though we use a myButton class without any styles, and instead we set inline styles like the upper code, it still remains blurred!!!
Ensure text-shadow: none is set.
Please try this css
text-rendering: optimizeLegibility !important; -webkit-font-smoothing: antialiased !important;
I just encountered this issue.
This issue comes from not having a bold font available for the font you have embedded. You need to include the bold version of the font or the browser will try to render the bold version of the font badly.
It is because you have
overflow-x hidden
;) That's how I fixed it!
I found the solution by turning off in the chrome checkboxes the style panel at my element submit button and the styles aplied to the button too from other parent elements.
I am trying to use Font Awesome icons in the input placeholder.
I tried this but not working.
<body>
<input type="text" placeholder="" style="font-family:FontAwesome"/>
</body>
What’s wrong with this? I am getting some weird number in the placeholder instead of icon.
You can add font awesome icon as like that
<input type="text" placeholder="" style="font-family:Arial, FontAwesome" />
you can also check out the fiddle Fiddle click here
You can also use an icon outside of placeholder, placed with HTML. Here is my solution:
HTML
<i class="fas fa-search form__icon"></i>
<input type="text" name="search" class="form__input" placeholder=" Search">
CSS
.form__icon {
position: absolute;
pointer-events: none;
z-index: 2;
}
.form__input {
position: relative;
z-index: 3;
}
.form__input:placeholder-shown {
z-index: 1;
}
It's a bit complex, but it also give a possibility to use animated, rotated and flipped icons.
Check my CodePen: https://codepen.io/dzakh/pen/YzKqJvy
When you try to use a font icon and what you get is some weird character, this is probably due to the fact that the browser tries to render that icon with a wrong font. Check what your input's font-family is when rendered by inspecting the element, and then going into the 'Computed' tab (Chrome: Right click -> Inspect Element -> Computed). If it's not font-awesome, but you think you set it, try to use font-family: FontAwesome !important;. This will override any of the possible input's parrent font-family setting.
After a migration of an existing Content Management System i have some problems with existing classes - sometimes the Richtext Editor created the following HTML Code:
<span style="font-weight: bold; "><a href=""....>
Now, the Link is not bold, but i dont know if it is possible to overwrite any rule in CSS when having a custom inline Style property.
Is there any chance (without changing the HTML Code) to make the link as bold text?
Thanks in advance for any help.
Thanks for the first comments - but to be sure i want to add the "bold" tag only when ill have this "special" inline property. So i dont want to overwrite all classes with bold text.
When i have
<span><a style="font-weight: bold;">....</a>
Everthing is fine, the Link is bold
But when i have
<span style="font-weight: bold;">....
The link is NOT bold (but it should be bold).
This is little stupid Code from the Richtext Editor.
Original:
Use !important :
span {
font-weight: normal !important;
}
<span style="font-weight: bold; ">
<a href=""....>
link
</a>
</span>
Edit:
This means that in your CSS, there is somewhere :
span {
font-weight: normal !important;
}
You need to overwrite it by selecting the span with more specificity than the declaration in the current css, e.g:
/* somewhere in the css you can't modify */
span {
font-weight: normal !important;
}
/* the css you add */
.container span {
font-weight: bold !important;
}
<div class="container">
<span style="font-weight: bold; ">
<a href=""....>
link
</a>
</span>
</div>
The is because classes, ids, attributes, etc all have a score which add up to see which declaration will be used.
Start at 0, add 1000 for style attribute, add 100 for each ID, add 10 for each attribute, class or pseudo-class, add 1 for each element name or pseudo-element.
- smashingmagazine.com
And here is an cheat sheet :
I am trying to make a button for a message system to show an orange dot if there's a new message. However, i can't quite get it working. Is it possible?
Here's the button
<input type="button" value="Messages •" />
And the button on jsFiddle if anyone feels like trying out :-)
http://jsfiddle.net/ePA47/1/
Use a button element instead.
<button type="button">
Messages <span style="color: orange;">•</span>
</button>
Of course, don't add your stylings inline. I just did for this example's sake.
You could also add a class to the button such as new-messages and then do...
button.new-messages:after {
content: "•";
color: orange;
}
Just keep in mind the latter won't work in older IEs.
Use <button> instead of <input> since it has child elements which you can style.
To add an orange dot to your button, I would recommend using a background-image. This will give you the ability to design the dot however you wish, and not be constrained by font types.
It's also better for accessibility if the orange dot is added as a background image, as this is not content.
<input type="button" value="Messages" class="newmessage" />
.newmessage
{
background-image:url('http://img859.imageshack.us/img859/9611/orangedot.jpg');
background-repeat:no-repeat;
background-position:right center;
padding:5px;
padding-right:25px;
}
See Demo: http://jsfiddle.net/ePA47/3/
As per the question heading, the following will help to add multiple styles in a single style tag
<button type="button" style= "margin-top : 20px; border-radius: 15px"
class="btn btn-primary">View Full Profile
</button>
I am trying to differentiate a button so that clients can see that it is the button that is in focus by default when the page loads. The design calls for a simple border around the button. I have button and button1 defined in my css like so:
.button {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #003366
}
.button1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #003366
border: #00ffff;
border-style: solid;
border-width: 2px;
}
The button that I am trying to focus loses the default formatting. How might I fix this so that it simply keeps its formatting, the only difference being a thicker border around the button? Also, is there a way to make the border simply wrap itself around the shape of the button instead of being a rectangular border?
Here is an image of what my buttons look like:
In this case, I am trying to focus the Jail Address button.
The html for the input buttons is like so:
<input type="reset" class="button" name="refresh" value="Refresh">
<input type="submit" class=button1 name="jail" value="Jail Address" onClick="action='JailAddresses.html'">
<input type="submit" class="button" name="submit" value="Submit" onClick="action='Administrative.html'">
<input type="submit" class="button" name="back" value="Back" onClick="action='Administrative.html'">
the border by default is going to be rectangle, though with some browsers (not all) you can use the "border-radius: 5px" to get rounded corners
http://www.css3.info/preview/rounded-border/
you could also just make images with the buttons you want and use them instead (png is preferred since it will keep transparency)
.button1 {
background-image:url('paper.gif');
background-repeat: no-repeat;
cursor: hand;
}
I use that often instead of just img src=, then you can add an "on mouseclick" with javascript.. just an option. also, the cursor can be changed so it actually looks like they're rolling over a button :)
It appears that setting a button border:x style can completely change the button rendering, at least in Safari and Firefox. Here's a little test file I just used to demonstrate the effect:
<html>
<head>
</head>
<body>
<form>
<input type="submit" value="no border"/>
<input type="submit" value="border:0" style="border:0;"/>
<input type="submit" value="border:2" style="border:2;"/>
<input type="submit" value="width:8rem" style="width:8rem;"/>
</form>
</body>
</html>
Rendered in Firefox on MacOS, it looks like this:
and in Safari:
So it appears that the behaviour depends on both the border value and the browser. Seems odd to me, but there you are. I think this explains the effect described in the original question.
The default stylings for UI elements like buttons are user-agent defined, AFAIK there isn't a border setting which will allow you to follow the contours of the button without using CSS3's border-radius. Perhaps you should use a different element for your buttons that do not have a pre-defined shape, or use border-radius if appropriate, or a background image for which has the shape that you want.