font-awesome | 易学教程

Link with icon in Laravel 4

阅读更多关于 Link with icon in Laravel 4

Can someone help to rewrite this, from HTML to Laravel4? <a href="index.php" > Home </a> The route name for that page is just '/'. I know how to write simple link in Laravel: {{ HTML::link('/','Home) }} But how can I add the span class with the font-awesome icon? I'd just put the link in the href. <a href="{{ url('/') }}"> Home</a> No need to generate all the rest through Laravel. What @Dries suggests is simple and very straightforward, but you really want to have it done entirely via Laravel, I would suggest writing a

Show number of notifications on icon

阅读更多关于 Show number of notifications on icon

问题 I have a notification icon (font-awesome) which shows the number of notifications. I am having a problem trying to get the number to display in the correct position, as shown in see below image I need the text to be smaller and move right and up a little... here is the code .header .bubble { border-radius: 100%; height: 14px; width: 14px; background-color: rgba(226, 32, 91, 0.77); color: #ffffff; text-align: top; position: relative; top: 0px; float: right; right: -3px; } <a href="javascript:;

Why Font-Awesome icon class is different

阅读更多关于 Why Font-Awesome icon class is different

Why fontawesome icon class is different <script defer src="https://use.fontawesome.com/releases/v5.0.10/js/all.js" integrity="sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+" crossorigin="anonymous"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" /> PHP Geek The fa prefix has been deprecated in version 5. The new default is the fas solid style and the fab style for brands. Please Refer to this https://fontawesome

How to embed font-awesome icons into submit_tag

阅读更多关于 How to embed font-awesome icons into submit_tag

Trying to user font awesome icons for my buttons but I cant get it to show in the submit_tag <%= submit_tag icon("search"), class: "btn-primary", style:"width:40px;" %> output: <input class="btn-primary" name="commit" style="width:40px;" type="submit" value=""> helper: def icon(name, size=1) #icon("camera-retro") # html = "" html.html_safe end when I remove the html.html_safe line of the helper I get the same thing. its like html_safe

How to make Font awesome 5 work with webpack

阅读更多关于 How to make Font awesome 5 work with webpack

问题 I'm trying to use Fontawesome in my Flask/webpack project. The craziest thing is some point it worked then stopped, I changed something stupid, it worked again and finally it stopped working completely. What I have: package config: "devDependencies": { ... "css-loader": "^1.0.0", "node-sass": "^4.9.3", "sass-loader": "^7.1.0", "style-loader": "^0.23.0", "webpack": "^4.19.0", "webpack-cli": "^3.1.0", "webpack-merge": "^4.1.4" }, "dependencies": { "@fortawesome/fontawesome-free": "^5.3.1",

Bootstrap and font-awesome in MVC4

阅读更多关于 Bootstrap and font-awesome in MVC4

I am using MVC4 and have added Bootstrap and Font Awesome via nuget. I can see how Bootstrap gets bundled in via BootstrapBundleConfig.cs (which was added by the nuget package) below: public static void RegisterBundles() { BundleTable.Bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include("~/Scripts/bootstrap*")); BundleTable.Bundles.Add(new StyleBundle("~/Content/bootstrap").Include("~/Content/bootstrap.css", "~/Content/bootstrap-responsive.css")); } I have the following questions: For font-awesome, I don't see similar bundling code to the above for registering the required css files, is

Changing Width of Font Awesome Icons

阅读更多关于 Changing Width of Font Awesome Icons

问题 I'm trying to adjust the scaling and width of an icon. I'm specifically trying to make the icon wider, but not taller. I'm not trying to make it fa-2x or fa-3x . I'm trying to scale it so that the width is, say 150%, while the height is still 100%. 回答1: Really easy using scale .fa { transform: scale(1.5,1); } 回答2: This answer only works when you are trying to adjust the icons in the list. But I am posting this because I guess some people visiting this page is

Using Numbers With Font Awesome

阅读更多关于 Using Numbers With Font Awesome

问题 I want to use numbers to list steps in a process. I was curious about how to do this with Font Awesome. I'd like to use circles with a 1, 2, 3... in it. Is this possible? Will Font Awesome be adding numbers to the list of icons? Thanks! 回答1: Font awesome actually has built-in support for stacking regular text (i.e. numbers, letters, ..) on top of icons. Here is a nice example of a calendar icon with the actual day of the month as plain text. As the post also explains you might need to throw

How do I “pull-out” only the dozen icons I actually use?

阅读更多关于 How do I “pull-out” only the dozen icons I actually use?

I have an angular project that is built using grunt which uses maybe a dozen icons from font-awesome. Currently, I'm including and thus distributing the entire font-awesome library. Is there a way to "pull-out" only the icons I actually use (preferably as part of the build process)? I've seen the icomoon app, and that seems to give me the result I want, but it's a manual process to update when icon usage changes. First use Font-Awesome-SVG-PNG to get individual SVG files for each Font Awesome icon. font-awesome-svg-png --color black --sizes 128 --no-png Then using grunt-webfont , combine the

Spring Boot - Font Awesome OTS parsing error: Failed to convert

阅读更多关于 Spring Boot - Font Awesome OTS parsing error: Failed to convert

问题 Problem with Fonts not working correctly within a Spring Boot / Spring MVC Application. The problem is that all of the font files show various errors such as below Failed to decode downloaded font: http://localhost:8080/fonts/fontawesome-webfont.woff2?v=4.4.0 OTS parsing error: Failed to convert WOFF 2.0 font to SFNT Failed to decode downloaded font: http://localhost:8080/fonts/fontawesome-webfont.woff?v=4.4.0 OTS parsing error: incorrect file size in WOFF header Failed to decode downloaded