Recently I decided to switch to SVG icons from font icons. I used Illustrator to draw my SVGs and I exported the artboards (containing an individual icon) with the following settings:
Styling: Inline Style
Font: SVG
Images: Embed
Object IDs: Layer Names
Decimal: 2
I used the Icomoon app to generate the SVG icons. The problem though is, all the SVGs have a fill, stroke or style property inline everywhere. I can’t update the icon color with CSS while those styles are there in the SVG.
Am I missing something? Is there an option in Illustrator to save the SVG’s without the fill / stroke / styles properties? Or do I have to use something like Remove SVG Properties to remove the properties?
If Remove SVG Properties is the way to go, can someone tell me how to use it in my Angular CLI project? I’m very new to this.
Yes, you can.
Just select the svg in CSS then apply:
selector {
fill: red;
stroke: blue;
/* etc */
}
It seems to work fine for me.
Optionally, add !important if needed.
Another thing you can do to update inline CSS is by jQuery, using .css() method.
One way to use free icons from that place is (link):
.lnr-home {
color: red;
font-size: 40px;
/* To get crisp results, use sizes that are
a multiple of 20; because Linearicons was
designed on a 20 by 20 grid. */
}
body {
font-size: 40px;
font-family: sans-serif;
color: #red;
}
<!-- Add the following <link> to the <head> of your HTML. -->
<link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
<!-- To insert the icon: -->
<span class="lnr lnr-home"></span> lnr-home
<!--
Cheat Sheet:
https://linearicons.com/free#cheatsheet
-->
You can use online tool
this is automatically convert inline style.
use this android developer
http://inloop.github.io/svg2android/
Related
I am using a trix editor such as <%= f.trix_editor :body, class: 'trix-content form-control', rows: 15 %>
Currently the buttons are black and obviously translated english (as well as the alt texts).
How am I supposed to change the colors of the buttons? Everything Ive tried didn't seem to work.
Is there any way to provide german translations? I need my full application to be completely german.
Best regards
You can change the background color of the buttons with css.
trix-toolbar .trix-button-group button {
background-color: green;
}
The button icons are images, so you would have to replace them in order to customize icon color, etc. For example, to remove the bold button icon with css:
trix-toolbar .trix-button-group button.trix-button--icon-bold::before {
background-image: none;
}
You can change the button tooltips (for translation or otherwise) with javascript by referring to the data-trix-attribute for the button you would like to change. For example, to change the bold button where the data-trix-attribute is set to "bold" (due to browser inconsistencies, it is best to set both the Trix.config.lang and the element title attribute):
Trix.config.lang.bold = 'Really Bold';
document.querySelector('button[data-trix-attribute="bold"]').setAttribute('title', 'Really Bold');
Following snippet illustrates the various changes above.
// hover over the now blank bold button in the toolbar to see the tooltip
Trix.config.lang.bold = 'Really Bold';
document.querySelector('button[data-trix-attribute="bold"]').setAttribute('title', 'Really Bold');
trix-toolbar .trix-button-group button {
background-color: green;
}
trix-toolbar .trix-button-group button.trix-button--icon-bold::before {
background-image: none;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/trix/1.1.1/trix.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/trix/1.1.1/trix.js"></script>
<trix-editor></trix-editor>
I know that I'm really late to the conversation but I was looking at doing this very issue this morning. There are solutions about replacing the icons that Trix utilizes (Material Design Icons by Google). Someone has a really neat idea replacing them with FontAwesome icons.
These are SVG images so color cannot be changed. For my particular situation I used a webkit filter to change the color from black to gray:
trix-toolbar .trix-button--icon {
-webkit-filter: invert(50%);
}
This should go in the application.scss. For a reason I have not tracked down yet, putting this in the actiontext.scss file is not working, even though it's being imported into the application.scss.
I'm using a custom template and don't know where the certain definition is.
It is a cart image and I want to replace the image with some other, so I need to find it. I only have found this bit:
.fa-shopping-cart:before{content:"\f07a"}
.fa-shopping-cart:before{content:"\f07a"
is a code part to say before the applying of your class you will have the icon identify by the code "\f07a".
You can find other one by following the link : https://astronautweb.co/snippet/font-awesome/
you can also set your on image by changing the code above yb something seems:
content: url('yourimgpath');
Font Awesome is a web font containing all the icons from the Twitter Bootstrap framework, and now many more.
Whilst the implementation in Bootstrap is designed to be used with the <i> element (Bootstrap v2), you may find yourself wanting to use these icons on other elements. To do so, you'll need to use the following CSS on the desired element, and then substitute in the content value for the relevant icon
and was able to find substitute.It includes following icons such as:
Web Application Icons
Accessibility Icons
Hand Icons
Transportation Icons
Text Editor Icons
Brand Icons
All these icons,and much more can be used just by using class.
Font Awesome does not use images for icons and an img element without a src attribute is invalid HTML.
What you can do is add logic to show or hide the dummy icon beside the image. Here is an example using a class on a parent wrapper:
<div className="show-icon">
<i className="fa fa-..."></i>
<img src="..." />
</div>
When the parent div element has a class of .show-icon, you can use CSS to show the icon and hide the image:
div i.fa { display: none; }
div img { display: block; }
div.show-icon i.fa { display: inline-block; }
div.show-icon img { display: none; }
Is there a simple custom CSS for making all icons follow a certain theme color? I have seen the post for editing each icon individually but I am looking for a master one.
Yes, using CSS it's possible. Either give them all the same class which contains your custom styles or refer all the icons using their common ancestors.
Let's assume you have all icons inside an element of class element then you can define all the custom css for icons like:
.element i.fa{
/* Your custom styles */
}
Change i.fa to the concerned element if you have icons on different element other than i . Hope this helps.
Often templates, like those used for Bootstrap, have separate CSS files for different color themes.
These are merely overrides over the default colors.
blue.css, green.css, etc.
You could extend Kamlesh's answer by centralizing your color properties in a separate stylesheet that allows for abstraction of the "theme."
blue.css Example:
i.fa {
color: #0c9;
}
.inverse i.fa {
color: white;
}
I am building a web application where I have set my default color to navy blue using css. But when i added the twitter bootstrap css's in my page I did not find my navy blue color instead I found the white background color provided by twitter bootstrap.
My query is that what portion of css should I change in bootstrap to change my page's background.
You can overwrite Bootstraps default CSS by adding your own rules.
<style type="text/css">
body { background: navy !important; } /* Adding !important forces the browser to overwrite the default style applied by Bootstrap */
</style>
Bootstrap 4 provides standard methods for this, fully described here: https://getbootstrap.com/docs/4.3/getting-started/theming
Eg. you can override defaults simply by setting variables in the SASS file, where you import bootstrap. An example from the docs (which also answers the question):
// Your variable overrides
$body-bg: #000;
$body-color: #111;
// Bootstrap and its default variables
#import "../node_modules/bootstrap/scss/bootstrap";
You have to override the bootstrap default by being a bit more specific. Try this for a black background:
html body {
background-color: rgba(0,0,0,1.00);
}
I would not recommend changing the actual bootstrap CSS files. If you do not want to use Jako's first solution you can create a custom bootstrap style sheet with one of the available Bootstrap theme generator (Bootstrap theme generators). That way you can use 1 style sheet with all of the default Bootstrap CSS with just the one change to it that you want. With a Bootstrap theme generator you do not need to write any CSS. You only need to set the hex values for the color you want for the body (Scaffolding; bodyBackground).
You can simply add this line into your bootstrap_and_overides.css.less file
body { background: #000000 !important;}
that's it
I'm using CDN bootstrap, and the solution that I found was:
First, include the bootstrap's CDN, then (just under) you include the file .css where you are editing the default styles of bootstrap.
<!-- Bootstrap CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<!-- Your styles -->
<link rel='stylesheet' href='styles/my_bootsrap_editions.css'>
Add your own .css file & put in it:
body{
background: navy;
}
Important: While including css files in html, first include the cdn bootstrap css, then only include your own .css file. This way stylings in your own css file overrides the default behaviour from bootstrap css.
The colors changed due to the order of CSS files.
Place the custom CSS under the bootstrap CSS.
Its not recommended to overwrite bootstrap file, just in your local style.css use
body{background: your color !important;
here !important declaration overwrite bootstrap value.
how to change background color in html & css with class
example:
on html you write
<div class="pad_menu">
</div>
on css
.pad_menu {
padding: 100px;
background-color: #A9FFCB;
}
so your background will be change to Magic Mint, if you want to know the code of the color, i suggest you visit https://coolors.co. Hope this useful :)
Bootstrap css uses the halflings from Glyphicons.
If I purchased their full product line, how would I incorporate that into the bootstrap framework?
Use this CSS sprite generator, uploading the zip file. It will create the relevant CSS classes for you (names are taken from images itself), merging all images in one (transparent) PNG one.
You could also use the Font Awesome solution.
Scalable vector graphics means icons look awesome at any size.
Designed from scratch to be fully backwards compatible with Twitter Bootstrap 2.0.
You would have to recalculate the background positioning of every glyph icon into your own class or overwrite the classes already set by the bootstrap in order to work them in. Twitter's bootstrap uses the halfling (free) version of the icons which are 14px all around, the full set is double the size so the old background-position's won't work.
Here is an example of what one of the bootstraps icon classes looks like:
/* class for the icon "fast-backward", notice the positioning values set in pixels */
.icon-fast-backward {
background-position: -216px -72px;
}
/* main class, defining what icon sheet to use */
[class^="icon-"], [class*=" icon-"] {
background-image: url("../img/glyphicons-halflings.png");
background-position: 14px 14px;
background-repeat: no-repeat;
display: inline-block;
height: 14px;
line-height: 14px;
vertical-align: text-top;
width: 14px;
}
I have also created one on Github. Didn't see Marco's post above until after.
https://github.com/ekryski/bootstrap-template
From what I recall, Glyphicons doesn't provide their icons as a sprite version (many icons as one image), instead you get each icon separately. If you only plan on using a couple of their icons, this should be ok.
The best way would be to create a separate css file and continue on with their ".icon-" naming convention.
.icon-whatever {
background:url('..img/someicon.png') 0 0;
}
The default background position is 14px 14px so you need to reset it to 0 0 like I did above.
I've created a sprite and CSS drop-in for Bootstrap to provide this functionality. The repo and instructions are on Github. Not every icon has coverage yet, and some are still slightly off-center. To use the bigger icons just add the icon-large CSS class:
<i class="icon-large icon-search"></i>
There is a great article about Bootstrap Icons here: http://www.themplio.com/twitter-bootstrap-icons
No need to incorporate it. You can just add the glyphicons and use it alongside with the halflings bootstrap comes with.
Add the glyphicons (regular set) as follows:
/css/glyphicons.css
/fonts/glyphicons-regular.eot
/fonts/glyphicons-regular.svg
/fonts/glyphicons-regular.ttf
/fonts/glyphicons-regular.woff
/fonts/glyphicons-regular.woff2
You propably should give the base-css-class: .glyphicons the same style as bootstraps .glyphicon
.glyphicons {
position:relative;
top:2px;
display:inline-block;
font-family:'Glyphicons Regular';
font-style:normal;
font-weight:normal;
line-height:1;
vertical-align:top;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale
}
Next, add the reference to the glyphicons into your page as follows:
<link href="/css/glyphicons.css" rel="stylesheet" />
Now, use the complete 'regular' glyphicons alongside with the halflings:
<!-- halflings / bootstrap 3 -->
<span class="glyphicon glyphicon-glass"></span>
<!-- Glyphicons Regular set (note the plural suffix!) -->
<span class="glyphicons glyphicons-glass"></span>
The other answers are fine but keep in mind the difference between icons with the font-technique and the older technique when using sprite-png's. Png's are not always scaleable and therefore comes with several sizes. Also, the color can not be set. To contrast with the background, the .white class can be used on png's to switch from black to white. By using fonts, style the icons as you would style a font:
.iconstyle { color: blue; font-size: 26px; etc.. }
You could use my soluce. Put this line after bootstrap link url css on your header.
<link href="../assets/css/bootstrap.css" rel="stylesheet">
<link href="../assets/css/opa-icons.css" rel="stylesheet">
Then to call online html code
<i class="icon-close icon-red"></i> Someting <!-- 16x16pix size color red -->
<i class="icon32 icon-close icon-blue"></i> Someting <!-- 32x32pix size color red -->
You could download here the assets (images-icons png and css both in zip) :
http://www.photonautes-associes.fr/utils/assets.zip
enjoy :)
Download fonts from official bootstrap page and then paste this code as is in your CSS file
Try This code
#font-face{
font-family: 'Glyphicons Halflings';
src: url('/fonts/glyphicons-halflings-regular.eot');}
I thought I'd add my experience to the list here.
There were several obstacles for me when trying to add Glyphicons All to my existing, labyrinthine, Bootstrap-riddled codebase. (Among them, Glyphicons All uses the construction ".glyphicons .glyphicons-[name]" and Bootstrap uses the construction ".glyphicon .glyphicon-[name]").
I ultimately decided to just use them both, in parallel. Going forward, I find I'm using the Glyphicons All construction more and more, but the Bootstrap construction still works for all of my existing code.
Yes, including both "fonts" adds to the overall page weight, but not disastrously.
What I did was pretty simple and worked perfectly. NOTE: this is if you want those beautiful glyphicons working as fonts, as the bootstrap version I'm using does.
In the glyphicons zip, copy all the fonts in /glyphicons/web/bootstrap_example/fonts to where your bootstrap fonts are currently in your project
In the glyphicons zip, look at /web/bootstrap_example/css/glyphicons.css, copy and paste all into your own less/css file.
This step may be unnecessary as long as your own css/less file overwrites them properly: In your project's bootstrap.css file, remove #font-face stuff, .glyphicon styles, and all the glyphicon individual content tags (i.e, .glyphicon-xxxx:before { content: ... }).
In your less/css file with all the new tags, do a find and replace
".glyphicons-" replace with ".glyphicon-"
That should be it, unless I'm forgetting something simple. Works great for me.
Use glyphicons classess, example:
`<span class="glyphicon glyphicon-search" aria-hidden="true"></span>`
My favourite icon fonts is Fontello, you can download icons you need instead of whole package.