You can use another tag instead of input and apply FontAwesome the normal way. instead of your input with type image you can use this: <i class=”icon-search icon-2x”></i> quick CSS: .icon-search { color:white; background-color:black; } Here is a quick fiddle: DEMO You can style it a little better and add event functionality, to the i … Read more
You need to use the fas class and the pencil one will not show because it belong to the PRO package1 (https://fontawesome.com/icons/pencil?style=solid) ul a { text-decoration:none; font-size:25px; } <link rel=”stylesheet” href=”https://use.fontawesome.com/releases/v5.13.0/css/all.css”> <ul class=”special”> <li><i class=”fas fa-pencil” title=”Edit”></i></li> <li><a href=”#” class=”fas fa-search”><span class=”label”>Magnifier</span></a></li> <li><a href=”#” class=”fas fa-tablet”><span class=”label”>Tablet</span></a></li> <li><a href=”#” class=”fas fa-flask”><span class=”label”>Flask</span></a></li> <li><a href=”#” class=”fas … Read more
If you are using the JS+SVG version read this: Font Awesome 5 shows empty square when using the JS+SVG version The difference between the regular and the solid version is the font-weight. You simply need to adjust this one to swap between both version: input.star:checked ~ label.star:before { content: ‘\f005’; color: #e74c3c; transition: all .25s; … Read more
The Font Awesome CSS file is by default referencing those font files via a relative path ../ like below: @font-face { font-family: ‘FontAwesome’; src: url(‘../fonts/fontawesome-webfont.eot?v=4.3.0’); src: url(‘../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0′) format(’embedded-opentype’), url(‘../fonts/fontawesome-webfont.woff2?v=4.3.0’) format(‘woff2’), url(‘../fonts/fontawesome-webfont.woff?v=4.3.0’) format(‘woff’), url(‘../fonts/fontawesome-webfont.ttf?v=4.3.0’) format(‘truetype’), url(‘../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular’) format(‘svg’); font-weight: normal; font-style: normal; } This will fail if the CSS file itself is requested on a different path. … Read more
You need to use the proper Unicode inside a normal text element, and then set the font-family to “FontAwesome” like this: node.append(‘text’) .attr(‘font-family’, ‘FontAwesome’) .attr(‘font-size’, function(d) { return d.size+’em’} ) .text(function(d) { return ‘\uf118’ }); This exact code will render an “icon-smile” icon. The unicodes for all FontAwesome icons can be found here: http://fortawesome.github.io/Font-Awesome/cheatsheet/ Be … Read more
use button type=”submit” instead of input <button type=”submit” class=”btn btn-success”> <i class=”fa fa-arrow-circle-right fa-lg”></i> Next </button> for Font Awesome 3.2.0 use <button type=”submit” class=”btn btn-success”> <i class=”icon-circle-arrow-right icon-large”></i> Next </button>
first: add app/assets/fonts to the asset path (config/application.rb) config.assets.paths << Rails.root.join(“app”, “assets”, “fonts”) then move the font files into /assets/fonts (create the folder first) Now rename the font-awesome.css to font-awesome.css.scss.erb and edit it like this: change: @font-face { font-family: “FontAwesome”; src: url(‘../font/fontawesome-webfont.eot’); src: url(‘../font/fontawesome-webfont.eot?#iefix’) format(‘eot’), url(‘../font/fontawesome-webfont.woff’) format(‘woff’), url(‘../font/fontawesome-webfont.ttf’) format(‘truetype’), url(‘../font/fontawesome-webfont.svg#FontAwesome’) format(‘svg’); font-weight: normal; font-style: normal; … Read more
The JSF mapping and library name is missing in those URLs. If you’ve mapped your FacesServlet on *.xhtml, then those URLs should actually have been: GET http://DOMAIN:PORT/CONTEXT-ROOT/javax.faces.resource/font-awesome/3.2.1/font/fontawesome-webfont.woff.xhtml?ln=webjars&v=3.2.1 GET http://DOMAIN:PORT/CONTEXT-ROOT/javax.faces.resource/font-awesome/3.2.1/font/fontawesome-webfont.ttf.xhtml?ln=webjars&v=3.2.1 GET http://DOMAIN:PORT/CONTEXT-ROOT/javax.faces.resource/font-awesome/3.2.1/font/fontawesome-webfont.svg.xhtml?ln=webjars Essentially, you should be using #{resource} in CSS file to print the proper JSF resource URL: src: url(“#{resource[‘webjars:font-awesome/3.2.1/font/fontawesome-webfont.eot’]}&v=3.2.1”); src: url(“#{resource[‘webjars:font-awesome/3.2.1/font/fontawesome-webfont.eot’]}&#iefix&v=3.2.1”); However, as the source … Read more
Bootstrap 5 Beta – (update 2021) <div class=”input-group”> <input class=”form-control border-end-0 border rounded-pill” type=”text” value=”search” id=”example-search-input”> <span class=”input-group-append”> <button class=”btn btn-outline-secondary bg-white border-start-0 border rounded-pill ms-n3″ type=”button”> <i class=”fa fa-search”></i> </button> </span> </div> Demo Bootstrap 4 (original answer) Why not use an input-group? <div class=”input-group col-md-4″> <input class=”form-control py-2″ type=”search” value=”search” id=”example-search-input”> <span class=”input-group-append”> <button … Read more
Give Icomoon a try. You can upload your own SVGs, add them to the library, then create a custom font combining FontAwesome with your own icons.