{"id":422,"date":"2021-08-19T23:51:06","date_gmt":"2021-08-19T14:51:06","guid":{"rendered":"https:\/\/suzutukiblog.com\/?p=422"},"modified":"2023-01-05T23:34:32","modified_gmt":"2023-01-05T14:34:32","slug":"font-awesome2","status":"publish","type":"post","link":"https:\/\/suzutukiblog.com\/index.php\/2021\/08\/19\/font-awesome2\/","title":{"rendered":"Bootstrap+Font Awesome(\u30d5\u30a9\u30c8\u30ae\u30e3\u30e9\u30ea\u30fc)"},"content":{"rendered":"

Bootstrap\u3068Font Awesome\u3092\u4f7f\u3063\u3066\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u5bfe\u5fdc\u306e\u30d5\u30a9\u30c8\u30ae\u30e3\u30e9\u30ea\u30fc\u3092\u4f5c\u308b<\/h3>\n

\u4f5c\u308a\u305f\u3044\u3082\u306e<\/h2>\n

\"\"<\/p>\n

\u30d5\u30a1\u30a4\u30eb\u306e\u914d\u7f6e\u56f3\u2193<\/h3>\n

\"\"<\/p>\n

images\u306b\u8868\u793a\u3057\u305f\u3044\u753b\u50cf\u3092\u5165\u308c\u308b\u3002<\/p>\n

css\u30d5\u30a1\u30a4\u30eb\u306e\u4e2d\u306bgallery.css\u3092\u4f5c\u6210\u3057\u3066\u8a18\u8ff0\u3059\u308b<\/p>\n

HTML\u306e\u8a18\u8ff0<\/h3>\n
\n
<!DOCTYPE html>\r\n<html lang=\"ja\">\r\n<head>\r\n\u00a0 <meta charset=\"utf-8\">\r\n\u00a0 <title>\u82b1\u306e\u30d5\u30a9\u30c8\u30ae\u30e3\u30e9\u30ea\u30fc<\/title>\r\n  <meta name=\"description\" content=\"\u30d5\u30a9\u30c8\u30ae\u30e3\u30e9\u30ea\u30fc\u3067\u3059\u3002\">\r\n\u00a0 <meta name=\"keywords\" content=\"\u82b1,\u30d5\u30a9\u30c8\u30ae\u30e3\u30e9\u30ea\u30fc\">\r\n\u00a0 <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\r\n\u00a0 <link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.0.0-beta.2\/css\/bootstrap.min.css\" integrity=\"sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb\" crossorigin=\"anonymous\">\r\n\u00a0 <link rel=\"stylesheet\" href=\"css\/gallery.css\">\r\n<\/head>\r\n\u00a0 <body>\r\n \u00a0 <!-- \u30b0\u30ed\u30fc\u30d0\u30eb\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3(\u30ca\u30d3\u30d0\u30fc) -->\r\n \u00a0 <nav class=\"navbar fixed-top navbar-expand-lg navbar-dark bg-dark\">\r\n \u00a0 \u00a0 <div class=\"container\">\r\n\u00a0 \u00a0 \u00a0 <!-- \u30d5\u30a9\u30f3\u30c8\u30aa\u30fc\u30b5\u30e0\u306e\u30a2\u30a4\u30b3\u30f3\u3092\u4f7f\u3046i class~ <\/i>-->\r\n \u00a0 \u00a0 \u00a0 <a class=\"navbar-brand\" href=\"gallery.html\"><i class=\"far fa-image mr-1\"><\/i>Cats<\/a>\r\n \u00a0 \u00a0 \u00a0 <!-- \u30cf\u30f3\u30d0\u30fc\u30ac\u30fc\u30e1\u30cb\u30e5\u30fc(bootstrap\u516c\u5f0f\u304b\u3089\u30b3\u30d4\u30da\u3067\u304d\u308b) -->\r\n\u00a0 \u00a0 \u00a0 <button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\"#navbarSupportedContent\" aria-controls=\"navbarSupportedContent\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\r\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"navbar-toggler-icon\"><\/span>\r\n \u00a0 \u00a0 \u00a0 <\/button>\r\n \u00a0 \u00a0 \u00a0 <div class=\"collapse navbar-collapse\" id=\"navbarSupportedContent\">\r\n \u00a0 \u00a0 \u00a0 \u00a0 <!-- \u30db\u30fc\u30e0\u306e\u90e8\u5206\u3092\u30a2\u30af\u30c6\u30a3\u30d6\u306b\u3059\u308b -->\r\n \u00a0 \u00a0 \u00a0 \u00a0 <ul class=\"navbar-nav\">\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <li class=\"nav-item\">\r\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <a class=\"nav-link active\" href=\"gallery.html\">Home<\/a>\r\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/li>\r\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <li class=\"nav-item\">\r\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <a class=\"nav-link\" href=\"#\">New<\/a>\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/li>\r\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <li class=\"nav-item\">\r\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <a class=\"nav-link\" href=\"#\">About<\/a>\r\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/li>\r\n \u00a0 \u00a0 \u00a0 \u00a0 <\/ul>\r\n \u00a0 \u00a0 \u00a0 <\/div>\r\n \u00a0 \u00a0 <\/div>\r\n \u00a0 <\/nav>\r\n \u00a0 <!-- \u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u5bfe\u5fdc\u306e\u305f\u3081\u306e\u6e96\u50991 -->\r\n\u00a0 <main class=\"container\">\r\n \u00a0 \u00a0 <!-- \u30b8\u30e3\u30f3\u30dc\u30c8\u30ed\u30f3 -->\r\n \u00a0 \u00a0 <div class=\"jumbotron\">\r\n \u00a0 \u00a0 \u00a0 <!-- \u30d5\u30a9\u30f3\u30c8\u30aa\u30fc\u30b5\u30e0\u306e\u30ab\u30e1\u30e9\u30a2\u30a4\u30b3\u30f3\u3092\u5229\u7528\u3059\u308b -->\r\n \u00a0 \u00a0 \u00a0 <h1><i class=\"fas fa-camera-retro\"><\/i>\u30d5\u30a9\u30c8\u30ae\u30e3\u30e9\u30ea\u30fc<\/h1>\r\n\u00a0 \u00a0 \u00a0 <p>\u82b1\u306e\u30d5\u30a9\u30c8\u30ae\u30e3\u30e9\u30ea\u30fc\u3092\u3054\u89a7\u304f\u3060\u3055\u3044\u3002<\/p>\r\n \u00a0 \u00a0 <\/div>\r\n \u00a0 \u00a0 <!-- \u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u5bfe\u5fdc\u306e\u305f\u3081\u306e\u6e96\u50992 -->\r\n \u00a0 \u00a0 <div class=\"row\">\r\n \u00a0 \u00a0 \u00a0 <!-- mb-3\uff1dmargin-bottom3\u3067HTML\u3067\u3082\u76f4\u63a5\u6307\u5b9a\u3067\u304d\u308b -->\r\n \u00a0 \u00a0 \u00a0 <div class=\"col-lg-4 col-sm-6 mb-3\">\r\n\u00a0 \u00a0 \u00a0 \u00a0 <!-- \u753b\u50cf\u306e\u5916\u5074\u306b\u7e01\u3092\u3064\u3051\u308b -->\r\n \u00a0 \u00a0 \u00a0 \u00a0 <div class=\"img-thumbnail\"> \r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <img src=\"images\/flower1\">\r\n \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\r\n \u00a0 \u00a0 \u00a0 <\/div>\r\n \u00a0 \u00a0 \u00a0 <!-- \u753b\u9762\u30b5\u30a4\u30ba\u304clg\u306e\u6642\u6a2a\u306b3\u3064\u8868\u793a\u3057\u3001sm\u306e\u6642\u306f\u6a2a\u306b2\u3064\u8868\u793a -->\r\n\u00a0 \u00a0 \u00a0 <div class=\"col-lg-4 col-sm-6 mb-3\">\r\n \u00a0 \u00a0 \u00a0 \u00a0 <div class=\"img-thumbnail\">\r\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <img src=\"images\/flower2\">\r\n \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\r\n \u00a0 \u00a0 \u00a0 <\/div>\r\n \u00a0 \u00a0 \u00a0 <div class=\"col-lg-4 col-sm-6 mb-3\">\r\n\u00a0 \u00a0 \u00a0 \u00a0 <div class=\"img-thumbnail\">\r\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <img src=\"images\/flower3\">\r\n \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\r\n \u00a0 \u00a0 \u00a0 <\/div> \r\n\u00a0 \u00a0 \u00a0 <div class=\"col-lg-4 col-sm-6 mb-3\">\r\n \u00a0 \u00a0 \u00a0 \u00a0 <div class=\"img-thumbnail\">\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <img src=\"images\/flower4\">\r\n \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\r\n \u00a0 \u00a0 \u00a0 <\/div>\r\n \u00a0 \u00a0 \u00a0 <div class=\"col-lg-4 col-sm-6 mb-3\">\r\n \u00a0 \u00a0 \u00a0 \u00a0 <div class=\"img-thumbnail\">\r\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <img src=\"images\/flower5\">\r\n\u00a0 \u00a0 \u00a0 \u00a0 <\/div>\r\n \u00a0 \u00a0 \u00a0 <\/div>\r\n \u00a0 \u00a0 \u00a0 <div class=\"col-lg-4 col-sm-6 mb-3\">\r\n \u00a0 \u00a0 \u00a0 \u00a0 <div class=\"img-thumbnail\">\r\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <img src=\"images\/flower6\">\r\n \u00a0 \u00a0 \u00a0 \u00a0 <\/div> \u00a0 \u00a0 \u00a0 <\/div>\r\n  \u00a0 \u00a0  <div class=\"col-lg-4 col-sm-6 mb-3\">\r\n \u00a0 \u00a0 \u00a0 \u00a0 <div class=\"img-thumbnail\">\r\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <img src=\"images\/flower7\">\r\n \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\r\n \u00a0 \u00a0 \u00a0 <\/div>\r\n \u00a0 \u00a0 \u00a0 <div class=\"col-lg-4 col-sm-6 mb-3\">\r\n  \u00a0 \u00a0\u00a0 <div class=\"img-thumbnail\">\r\n \u00a0 \u00a0 \u00a0 \u00a0 <img src=\"images\/flower8\">\r\n \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\r\n \u00a0 \u00a0 \u00a0 <\/div>\r\n \u00a0 \u00a0 \u00a0 <div class=\"col-lg-4 col-sm-6 mb-3\">\r\n \u00a0 \u00a0 \u00a0 \u00a0 <div class=\"img-thumbnail\">\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <img src=\"images\/flower19\">\r\n \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\r\n \u00a0 \u00a0 \u00a0 <\/div>\r\n \u00a0 \u00a0 <\/div>\r\n \u00a0 <\/main>\r\n \u00a0<!-- Bootstrap\u3092\u5c0e\u5165\u3059\u308b\u305f\u3081\u306eCDN -->\r\n \u00a0<script src=\"https:\/\/code.jquery.com\/jquery-3.2.1.slim.min.js\" integrity=\"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr\/rE9\/Qpg6aAZGJwFDMVNA\/GpGFF93hXpG5KkN\" crossorigin=\"anonymous\"><\/script>\r\n\u00a0 <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/popper.js\/1.12.3\/umd\/popper.min.js\" integrity=\"sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh\" crossorigin=\"anonymous\"><\/script> \r\n\u00a0 <script src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.0.0-beta.2\/js\/bootstrap.min.js\" integrity=\"sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ\" crossorigin=\"anonymous\"><\/script>\r\n\u00a0 <!-- \u30d5\u30a9\u30f3\u30c8\u30aa\u30fc\u30b5\u30e0\u3092\u5c0e\u5165\u3059\u308b\u305f\u3081\u306eCDN --> \r\n\u00a0 <script defer src=\"https:\/\/use.fontawesome.com\/releases\/v5.0.2\/js\/all.js\"><\/script>\r\n <\/body>\r\n <\/html><\/code><\/pre>\n<\/div>\n
CSS\u306e\u8a18\u8ff0(css\u30d5\u30a1\u30a4\u30eb\u306e\u4e2d\u306bgallery.css\u3092\u4f5c\u6210\u3057\u3066\u8a18\u8ff0\u3059\u308b)<\/h3>\n
\n
html {\r\n  font-size: 16px;\r\n}\r\nbody {\r\n  padding-top: 5rem;\r\n  font-family: \"Hiragino Kaku Gothic ProN\", \"\u30e1\u30a4\u30ea\u30aa\", sans-serif;\r\n}\r\n\/* \u753b\u50cf\u304c\u6307\u5b9a\u3055\u308c\u305f\u30b0\u30ea\u30c3\u30c9\u306b\u53ce\u307e\u308b\u3088\u3046\u306b\u3059\u308b *\/\r\nimg {\r\n  width: 100%;\r\n}<\/code><\/pre>\n<\/div>\n
\n
\u307e\u3068\u3081<\/h3>\n
Bootstrap\u3092\u4f7f\u3046\u3053\u3068\u3067CSS\u306e\u30b3\u30fc\u30c9\u91cf\u3092\u6e1b\u3089\u3059\u3053\u3068\u304c\u3067\u304d\u3001\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u5bfe\u5fdc<\/strong>\u304c\u3067\u304d\u308b\u3002<\/p>\n
\u30d5\u30a9\u30f3\u30c8\u30aa\u30fc\u30b5\u30e0<\/strong>\u3092\u4f7f\u3046\u3053\u3068\u3067\u30a2\u30a4\u30b3\u30f3\u3092\u4f7f\u3046\u3053\u3068\u304c\u3067\u304d\u308b\u3002<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
Bootstrap\u3068Font Awesome\u3092\u4f7f\u3063\u3066\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u5bfe\u5fdc\u306e\u30d5\u30a9\u30c8\u30ae\u30e3\u30e9\u30ea\u30fc\u3092\u4f5c\u308b \u4f5c\u308a\u305f\u3044\u3082\u306e \u30d5\u30a1\u30a4\u30eb\u306e\u914d\u7f6e\u56f3\u2193 images\u306b\u8868\u793a\u3057\u305f\u3044\u753b\u50cf\u3092\u5165\u308c\u308b\u3002 css\u30d5\u30a1\u30a4\u30eb\u306e\u4e2d\u306bgallery.css\u3092\u4f5c\u6210\u3057\u3066 […]<\/p>\n","protected":false},"author":1,"featured_media":6990,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[2,4,27],"tags":[],"class_list":["post-422","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bootstrap","category-font-awesome","category-programming-note"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t