I am using this file to implement icons on my input button
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<input type=button class="submitter" onClick="location.href='../test.htm'" value="๏ Pre-payment"/>
my Css file includes the following code
input[type="button"] {
font-family: FontAwesome;
}
The problem is I want input button value to be of the font that is consistent with my site. Right not the words "Pre-payment" on my button are taking up fonts from font awesome . If I remove font awesome and add my own font family the icon does not appear.
Any suggestions/ Ideas?
I tried to download the font awesome css file and modify it manually from whatever site it is on, but I can't find a copy of it.
Take another aproach, instead of assigning the font-awesome directly to the input assign it as
input[type="button"]:before{ content: 'fontawesomeCode', font-family: FontAwesome }
While keeping pre-payment text on the button and aligning it with padding.
I'm not sure if you can do it using an input element. It is possible using a button though. Here are two examples:
1) Using a seperate element (eg; i or span, etc) within the button for the icon.
<button type="button">
<i class="fa fa-credit-card" aria-hidden="true"></i> Pre-payment
</button>
2) Using a pseudo element which allows you to make the necessary changes for the icon via css.
<button type="button" class="submitter" onClick="location.href='../test.htm'"/>Pre-payment</button>
<style>
button.submitter:before {
font-family: FontAwesome;
content:'\f09d';
margin-right:4px;
}
</style>
You're applying the font family at wrong point. When you're changing the font family it loads that part of the family and all the relative character mappings. So in case you want to add icons, just use the icons as given in the official fontawesome docs. Also Since <input type="button"> is unable to have any html inside it, it's not possible to include text AND icons to it.
I would suggest using <button>.
Reference to my opinion <button> vs. <input type="button" />. Which to use?
HTML
<button type=button class="submitter" onClick="location.href='../test.htm'">๏ Pre-payment <i class="required-icon-fontawesome"></i></button>
CSS
button {
font-family: tahoma, helvetica, sans-serif;;
}
You can use <button> tag, add a <strong> or <span> inside where you'll use default font.
<button type="button" name="button" class="submitter" onClick="location.href='../test.htm'">
๏
<strong>Pre-payment</strong>
</button>
CSS
button {
font-family: FontAwesome;
}
button strong {
font-family: 'Your font';
}
Related
I have a project which uses emojis.
Users will interact with it on the browser, but they will eventually copy and paste it to whatsapp.
So I would like them to see emojis with the Whatsapp styles, rather than seeing one thing and then see it change to a different style once they paste it to Whatsapp.
Is there a way to override how the styles for the emojis on the browser?
Example: this is how it looks on Chrome
This is how it looks on Whatsapp
The size difference is because I've zoomed in, but this literally the same emoji copied and pasted from/to whatsapp-web and browser.
Is it possible to build a text input the make the emojis look like their Whatsapp version?
.arialDiv {
font-family: Arial;
}
.timesDiv {
font-family: "Times New Roman";
}
.otherDiv {
font-family: Helvetica;
}
<div class="arialDiv">
<input class="arialDiv" type="text" value="๐ธ๐ธ๐ธ Arial"/>
</div>
<div class="timesDiv">
<input class="timesDiv" type="text" value="๐ธ๐ธ๐ธ Times new roman"/>
</div>
<div class="otherDiv">
<input class="otherDiv" type="text" value="๐ธ๐ธ๐ธ Helvetica"/>
</div>
It seems they use Helvetic Neue by Linotype.
https://www.fontmirror.com/helvetica-neue
But the regular font file does not come with the emojis.
My question is related I think to jquery, angularjs and bootstrap.
I am rendering information that is coming from the backend and is presented on the front end in the form of several boxes. I am trying to get an "element selection effect" that when someone clicks on one or more of the boxes the entire box gets darker (or preferably blue with some level of transparency) and an ok-checkmark appears on it. The element is actually a bootstrap Well with some content inside.
I currently have an onClick event that colors the background, but it is not enough. Unlike an image, that can be entirely darkened when changing the background color, with a well (or any content box) it just colors the background and the content is still visible. I also want to add that green checked-mark icon inside the box when clicked, but I do not know how to add elements on the fly after onClick event.
Here is my relevant pieces of code (simplified objects, no backend):
var app = angular.module('myApp', []);
app.controller('SelectCtrl', function($scope) {
$scope.collections = [
{text:'content collection1'},
{text:'content collection2'}];
$scope.selectBox = function(collection){
collection.isclicked =! collection.isclicked;
$("#well").click(function(){
if (collection.isclicked){
//$("div").append('<span class="glyphicon glyphicon-ok pull-right"></span>');
}
});
}
});
.well:hover{
cursor:pointer;
cursor:hand;
color: #555;
text-decoration: none;
background-color: #C0C0C0;
}
.well {
border-color:#8CC63F;
float:left;
margin-right: 20px;
}
.well-active {
background-color:#3399ff;
}
.well-active:hover {
background-color:#3399ff;
}
<div data-ng-controller="SelectCtrl">
<div data-ng-repeat="collection in collections" data-ng-init="collection.isclicked=false">
<div class="well" data-ng-click="selectBox(collection)" data-ng-class="{'well-active': collection.isclicked}">
<div>{{collection.text}}</div>
</div>
</div>
</div>
So as I mentioned, the way it works now is that the selected wells change their background color, but that's it. How do I darken/color the entire well, including the content, and how do I add an icon on top of that background (inside the well) after mouse-click?
You could do an ng-show/ng-hide in elements inside of the well div:
<div data-ng-controller="SelectCtrl">
<div data-ng-repeat="collection in collections" data-ng-init="collection.isclicked=false">
<div class="well" data-ng-click="selectBox(collection)" data-ng-class="{'well-active': collection.isclicked}">
<span ng-hide="collection.isClicked">{{collection.text}}</span>
<i ng-show="collection.isClicked" class="glyphicon glyphicon-ok"></i>
</div>
</div>
</div>
This will show the content if the collection is not checked, and a check mark if the collection is checked.
In this question, I will not be giving the user any control over the color or font type in my JQuery list.
I am wondering if there is a way (without applying an entirely new theme) to change the font color of a JQuery list. This is currently using the default theme.
The class is named: ui-content
I have tried applying this CSS to the page, but the page still looks like the default JQuery Theme:
.ui-content{
font: "Helvetica Neue-Light", Helvetica, Arial, sans-serif;
color:#A25254;
}
Here is an example of one of the List View's Rows not changing font or color:
I would like the font to be light, not bold. I would also like to be able to change the icon on the left of the table.
Here is example code of how the table was constructed:
<div data-role="page" id="page1">
<div data-role="header">
<h1>jQuery Mobile Example</h1>
</div>
<div role="main" class="ui-content" data-filter="true">
<!--Begining of Table View-->
<div data-role="collapsible" data-inset="false">
<h3>Title</h3>
<p>Description</p>
</div>
</div>
</div>
Here is a JSFiddle of what I am trying to do: http://jsfiddle.net/jakechasan/M7LLU/
There are few options for that. First thing you should use id for that. <div role="main" class="ui-content" data-filter="true" id="Something">
So Css will be something like this:
#Something{
font: "Helvetica Neue-Light", Helvetica, Arial, sans-serif;
color:#A25254;
}
And Another option is 'inspect' your div and find out what's your div's class.
You will find something like this .ui-overlay-a, .ui-page-theme-a, .ui-page-theme-a .ui-panel-wrapper
The bold one is (i checked on google chrome. if it's bold it's one you should write)
if bold one is : .ui-panel-wrapper
Example :
.ui-panel-wrapper .ui-content{
yourCss:ishere;
}
Is there an easy way of increasing the size of Glyphicons?
I found some solution like Font Awesome but don't want to include new CSS library just to increase size 2 icons.
Setting the font-size of the <span> tag worked for me
<span class="glyphicon glyphicon-ok" style="font-size: 20px;"></span>
As of Bootstrap 3, glyphicons have been changed into fonts rather than sprites. This gives you more flexibility. For example, you can just set the font-size and move on.
<span class="glyphicon glyphicon-adjust" style="font-size:48px;"></span>
Or you can simply write a modifier class:
.glyphicon-2x {
font-size: 48px;
}
Just need to set the fontsize up :)
You have more than one option to do this:
First (set it straight to the element)
<span class="glyphicon glyphicon-search" style="font-size:30px"></span>
Second (set it in a css file)
.glyphicon{
font-size: 30px;
}
Third (build modify-classes) [i prefer this posibility]
.glyphicon-2x{
font-size: 40px;
}
.glyphicon-3x{
font-size: 60px;
}
...
Usage:
<span class="glyphicon glyphicon-2x glyphicon-search"></span>
there are more options to get the third one more tiny. there for you should read more about
Less
according to your question and the comment that brandon gave me, you can use the above with a other icon contianer.
Bootstrap 2.3
First
<i class="icon-search" style="-webkit-transform:scale(1.8);"></i>
Second
.icon-search{
-webkit-transform:scale(1.8);
-moz-transform:scale(1.8);
-o-transform:scale(1.8);
}
Third
.icon-x2{
-webkit-transform:scale(2.0);
-moz-transform:scale(2.0);
-o-transform:scale(2.0);
}
.icon-x3{
-webkit-transform:scale(3.0);
-moz-transform:scale(3.0);
-o-transform:scale(3.0);
}
//here i use the css from above (Bootstrap 3)
//actually you can name it like you want
<i class="icon-search icon-2x"></i>
This is one way to increase the size of icons in Bootstrap 2.3. As I note in my comment, the results will be pretty poor because you are scaling the spritesheet image.
JSFiddle demo
.test {
background-image: url("http://twitter.github.io/bootstrap/assets/img/glyphicons-halflings.png");
width: 90px;
height: 90px;
background-size: 2100px 800px;
}
Consider Fontello instead. They allow you to generate a custom font based on the icons you choose.
You can use:
.icon-whatever {
zoom: 2;
-moz-transform: scale(2); /* Firefox */
}
But, it will look fuzzier the larger you go, as it is scaling the image up. A font-icon library will scale a lot better.
You can override bootstrap's class, for example:
// Size and position are not working.
.icon-glass {
background-size: 800px;
backgroung-position: 10px 50px;
width: 24px;
height: 24px;
}
The problem is that icons will look ugly due to the resolution.
Hope this helps!
If you use the glyphicons for buttons it's pretty simple:
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star"></span>
</button>
The btn-lg defines the size. You can use btn-lg, bnt-sm, btn-sx
Edit:
If you don't use buttons or lg is not large enough, you can add an own class and use font-size (only tested in bootstrap 3.0). In bootstrap 3.0 glyphicons exist as .svg so they won't look ugly
Example:
<button type="button" class="btn btn-default btn-lg myGlyphicon">
<span class="glyphicon glyphicon-star"></span>
</button>
CSS:
.myGlyphicon {font-size: 120%;}
or
.myGlyphicon {font-size: 70px;}
You can use IcoMoon.io
a very easy to use tool for generating icon font of different colours ,size's and even you can generate sprites from you selection.
I just found a very easy wayโusing "transform". For example, place:
.glyphicon-chevron-right {transform:scale(2.9,2.9);}
in your CSS to increase it 2.9 times.
If you're using Bootstrap 3, why don't you use em widths on the icon? If the icons are embedded within headings/paragraphs/bodies etc. then using a font size in ems will increase the size of the icons relative to the paragraph that they're in.
For example, if you have:
<span class="glyphicon glyphicon-adjust"></span>
In the css that customizes your bootstrap, simply add:
.glyphicon {font-size: 1.25 em;}
This will scale the glyphs.
Try including class lead
<span class="glyphicon glyphicon-home lead"></span>
Or rap it inside a <h4> tag
Inside the DIV Tag
<div name="layer1" style="background-color:lightblue;">
<hr>Site:Downtown DataCenter Device: 2KBS</hr>
</div>
Hi ,
I am using Inline CSS Styling .
Inside the hr tag of my Div tag i want to have the text "site" and "Device" as bold and with big font ?
How can i have it
Please advice .
Try putting your content in a p. hr is a horizontal rule which is an empty element w3c specifcation. Put the text that you want into span elements and then apply styling font-weight:bold;font-size:20px or whatever size you want.
Firstly, <hr> is not intended to contain anything, much like <img> or <br />.
Try this:
<div class="layer1">
<strong>Site:</strong> Downtown DataCenter <strong>Device:</strong> 2KBS
</div>
<hr></hr>
The CSS might look like this:
.layer1
{
background-color: lightblue;
}
.layer1 strong
{
font-size: larger;
}