{"action":"created","issue":{"url":"https://api.github.com/repos/jgthms/bulma/issues/1943","repository_url":"https://api.github.com/repos/jgthms/bulma","labels_url":"https://api.github.com/repos/jgthms/bulma/issues/1943/labels{/name}","comments_url":"https://api.github.com/repos/jgthms/bulma/issues/1943/comments","events_url":"https://api.github.com/repos/jgthms/bulma/issues/1943/events","html_url":"https://github.com/jgthms/bulma/issues/1943","id":332641053,"node_id":"MDU6SXNzdWUzMzI2NDEwNTM=","number":1943,"title":"Font Awesome icon has no space before text in with navbar items.","user":{"login":"garretwilson","id":627125,"node_id":"MDQ6VXNlcjYyNzEyNQ==","avatar_url":"https://avatars0.githubusercontent.com/u/627125?v=4","gravatar_id":"","url":"https://api.github.com/users/garretwilson","html_url":"https://github.com/garretwilson","followers_url":"https://api.github.com/users/garretwilson/followers","following_url":"https://api.github.com/users/garretwilson/following{/other_user}","gists_url":"https://api.github.com/users/garretwilson/gists{/gist_id}","starred_url":"https://api.github.com/users/garretwilson/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/garretwilson/subscriptions","organizations_url":"https://api.github.com/users/garretwilson/orgs","repos_url":"https://api.github.com/users/garretwilson/repos","events_url":"https://api.github.com/users/garretwilson/events{/privacy}","received_events_url":"https://api.github.com/users/garretwilson/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-06-15T04:15:16Z","updated_at":"2018-06-15T16:48:58Z","closed_at":null,"author_association":"NONE","body":"This is about the Bulma **CSS framework**.\r\nI'm using Bulma **version** 0.7.1.\r\nMy **browser** is: Chrome Version 67.0.3396.87 (Official Build) (64-bit) (Windows 10 Professional)\r\n\r\nI have a simple little navbar, like this:\r\n\r\n```html5\r\n<nav class=\"navbar is-fixed-top\" role=\"navigation\" aria-label=\"main navigation\">\r\n  <div class=\"navbar-start\">\r\n    <a class=\"navbar-item\" href=\"#about\"><i class=\"far fa-question-circle\"></i> About</a>\r\n    <a class=\"navbar-item\" href=\"#jobs\"><i class=\"fas fa-briefcase\"></i> Jobs</a>\r\n  </div>\r\n<nav>\r\n```\r\n\r\nThat looks decent, but the Font Awesome icon is squished up against the text of each menu item. (The appearance of the \"Jobs\" item is particularly problematic.)\r\n\r\nI tried to split the link out below its `navbar-item`:\r\n\r\n```html5\r\n<div class=\"navbar-item\">\r\n  <a href=\"#jobs\"><i class=\"fas fa-briefcase\"></i> Jobs</a>\r\n</div>\r\n```\r\nThat gives me the correct spacing, but ruins the effect of the navbar item. (Instead of a block flyover, I get a link with its link color.\r\n\r\nThis is my first Bulma project, and my first impression is that it seems very finicky about the order and combination of things. (A button requires a `<span>` wrapper both for the icon and for the text!!!) I can live with that until I decide whether to stick with Bulma or go to something less verbose, but there wasn't anything obvious I could do here to fix the problem of the missing space between the nav item icon and text. I even tried the `<span>` wrappers that Bulma buttons use, to no avail."},"comment":{"url":"https://api.github.com/repos/jgthms/bulma/issues/comments/397679937","html_url":"https://github.com/jgthms/bulma/issues/1943#issuecomment-397679937","issue_url":"https://api.github.com/repos/jgthms/bulma/issues/1943","id":397679937,"node_id":"MDEyOklzc3VlQ29tbWVudDM5NzY3OTkzNw==","user":{"login":"imkrunal","id":17720036,"node_id":"MDQ6VXNlcjE3NzIwMDM2","avatar_url":"https://avatars1.githubusercontent.com/u/17720036?v=4","gravatar_id":"","url":"https://api.github.com/users/imkrunal","html_url":"https://github.com/imkrunal","followers_url":"https://api.github.com/users/imkrunal/followers","following_url":"https://api.github.com/users/imkrunal/following{/other_user}","gists_url":"https://api.github.com/users/imkrunal/gists{/gist_id}","starred_url":"https://api.github.com/users/imkrunal/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/imkrunal/subscriptions","organizations_url":"https://api.github.com/users/imkrunal/orgs","repos_url":"https://api.github.com/users/imkrunal/repos","events_url":"https://api.github.com/users/imkrunal/events{/privacy}","received_events_url":"https://api.github.com/users/imkrunal/received_events","type":"User","site_admin":false},"created_at":"2018-06-15T16:48:58Z","updated_at":"2018-06-15T16:48:58Z","author_association":"NONE","body":"You need to add `<span>` in your code for proper spacing. Your Code should be like this.\r\n\r\nDon't forgot to add class icon for the icon.\r\n\r\n`<a class=\"navbar-item\" href=\"#about\"><span class=\"icon\"><i class=\"far fa-question-circle\"></i></span><span> About</span></a>`"}}
{"actor":{"display_login":"imkrunal"}}