{"id":18466,"date":"2020-04-15T23:02:17","date_gmt":"2020-04-16T06:02:17","guid":{"rendered":"https:\/\/www.kith.org\/jed\/?p=18466"},"modified":"2020-04-15T23:09:33","modified_gmt":"2020-04-16T06:09:33","slug":"two-ways-to-create-a-question-mark-in-circle-icon","status":"publish","type":"post","link":"https:\/\/www.kith.org\/jed\/2020\/04\/15\/two-ways-to-create-a-question-mark-in-circle-icon\/","title":{"rendered":"Two ways to create a question-mark-in-circle \u201cicon\u201d"},"content":{"rendered":"\r\n<p>I recently had use for a little question-mark-in-a-circle icon. I did some searches for such icons, and found some, but it occurred to me that it would be better to use CSS or SVG to create a quasi-icon that isn\u2019t an image.<\/p>\r\n<p>So I did some searching, and found two ways to do it. There are a bunch of Stack Overflow pages that each contain multiple answers; these are the answers that I distilled for my own use out of the ones provided.<\/p>\r\n<p>First, CSS:<\/p>\r\n<style type=\"text\/css\">\r\n.in-circle {\r\n    display: block;\r\n    background: #4444ff;\r\n    color: #fff;\r\n    border-radius: 50%;\r\n    width: 40px;\r\n    height: 40px;\r\n    line-height: 40px;\r\n    text-align: center;\r\n    font-size: 20px;\r\n    font-family: Verdana;\r\n}\r\n<\/style>\r\n<p><span class=\"in-circle\">?<\/span><\/p>\r\n<pre>\r\n.in-circle {\r\n    display: block;\r\n    background: #4444ff;\r\n    color: #fff;\r\n    border-radius: 50%;\r\n    width: 40px;\r\n    height: 40px;\r\n    line-height: 40px;\r\n    text-align: center;\r\n    font-size: 20px;\r\n    font-family: Verdana;\r\n}\r\n<\/pre>\r\n<p>Next, SVG:<\/p>\r\n<svg width=\"50\" height=\"50\">\r\n  <circle cx=\"25\" cy=\"25\" r=\"20\" fill=\"#4444ff\" \/>\r\n  <text x=\"50%\" y=\"50%\" text-anchor=\"middle\" fill=\"white\" font-size=\"20px\" font-family=\"Verdana\" dy=\".3em\">?<\/text>\r\n?\r\n<\/svg>\r\n<pre>\r\n&lt;svg width=\"50\" height=\"50\">\r\n  &lt;circle cx=\"25\" cy=\"25\" r=\"20\" fill=\"#4444ff\" \/>\r\n  &lt;text x=\"50%\" y=\"50%\" text-anchor=\"middle\" fill=\"white\" font-size=\"20px\" font-family=\"Verdana\" dy=\".3em\">?&lt;\/text>\r\n?\r\n&lt;\/svg>\r\n<\/pre>\r\n<p>You can try out both of those at CodePen. Here, for example, is the <a href=\"https:\/\/codepen.io\/BruceBC\/pen\/PPPNQV\">Centered Text in SVG Circle<\/a> code that I derived my version from.<\/p>\r\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[24],"tags":[],"class_list":["post-18466","post","type-post","status-publish","format-standard","hentry","category-software"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.kith.org\/jed\/wp-json\/wp\/v2\/posts\/18466","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kith.org\/jed\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kith.org\/jed\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kith.org\/jed\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kith.org\/jed\/wp-json\/wp\/v2\/comments?post=18466"}],"version-history":[{"count":10,"href":"https:\/\/www.kith.org\/jed\/wp-json\/wp\/v2\/posts\/18466\/revisions"}],"predecessor-version":[{"id":18476,"href":"https:\/\/www.kith.org\/jed\/wp-json\/wp\/v2\/posts\/18466\/revisions\/18476"}],"wp:attachment":[{"href":"https:\/\/www.kith.org\/jed\/wp-json\/wp\/v2\/media?parent=18466"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kith.org\/jed\/wp-json\/wp\/v2\/categories?post=18466"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kith.org\/jed\/wp-json\/wp\/v2\/tags?post=18466"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}