{"id":2407,"date":"2024-08-18T17:38:49","date_gmt":"2024-08-18T08:38:49","guid":{"rendered":"https:\/\/haugenic.com\/?p=2407"},"modified":"2024-08-18T18:29:33","modified_gmt":"2024-08-18T09:29:33","slug":"%e3%80%90css%e3%80%91fontawesome%e3%81%a7%e4%bd%9c%e3%82%8bline%e3%82%b9%e3%82%bf%e3%83%b3%e3%83%97%e9%a2%a8%e3%82%a2%e3%83%8b%e3%83%a1%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%80%90%e3%81%a4%e3%82%89","status":"publish","type":"post","link":"https:\/\/haugenic.com\/?p=2407","title":{"rendered":"\u3010CSS\u3011FontAwesome\u3067\u4f5c\u308bLINE\u30b9\u30bf\u30f3\u30d7\u98a8\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3010\u3064\u3089\u3044\u7de8\u3011"},"content":{"rendered":"<p>\u5b8c\u5168\u306b\u8da3\u5473\u306e\u8ab0\u5f97CSS\uff01<\/p>\r\n<p>FontAwesome\u306e\u30a2\u30a4\u30b3\u30f3\u30d5\u30a9\u30f3\u30c8\u306b\u30aa\u30ea\u30b8\u30ca\u30ebCSS\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u3064\u3051\u3066\u3001LINE\u30b9\u30bf\u30f3\u30d7\u3063\u307d\u3044\u3082\u306e\u3092\u4f5c\u3063\u3066\u307f\u307e\u3057\u305f\u3002<br \/>\r\n<span class=\"maruobi2\">120px<\/span>\u00d7<span class=\"maruobi2\">120px<\/span>\u306e\u5c0f\u3055\u306a\u9818\u57df\u5185\u3067\u3001\u30a2\u30a4\u30b3\u30f3\u306b\u8e8d\u52d5\u611f\u3092\u4e0e\u3048\u308b\u30c1\u30e3\u30ec\u30f3\u30b8\uff01<\/p>\r\n<h2>FontAwesome\u306e\u6700\u65b0\u7248\uff082024\u5e748\u6708\u73fe\u5728\uff09<\/h2>\r\n<h3 class=\"sa sa--up\">head\u5185\u306b\u633f\u5165<\/h3>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.6.0\/css\/all.min.css\"&gt;<\/pre>\r\n<p>\u3053\u306e\u30b3\u30fc\u30c9\u3092<span class=\"marker_yellow_futo\">&lt;head&gt;<\/span>\u3068<span class=\"marker_yellow_futo\">&lt;\/head&gt;<\/span>\u306e\u9593\u306b\u633f\u5165\u3059\u308b\u3068\u3001<span class=\"maruobi3\">Font Awesome6.6.0<\/span>\u306e\u30a2\u30a4\u30b3\u30f3\u304c\u4f7f\u3048\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u30022024\u5e748\u6708\u73fe\u5728\u3001\u3053\u308c\u304c\u6700\u65b0\u7248\u3067\u3059\u3002<\/p>\r\n<h2>\u571f\u4e0b\u5ea7\u3057\u306a\u304c\u3089\u300c\u3059\u307e\u3093\u300d<\/h2>\r\n<div class=\"linestamp-04\"><i class=\"fa-solid fa-person-praying\"><\/i> <span class=\"text-04\">\u3059\u307e\u3093<\/span><\/div>\r\n<div><div class=\"su-spoiler su-spoiler-style-default su-spoiler-icon-plus su-spoiler-closed\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span>\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u3092\u898b\u308b<\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\">\r\n\r\n\r\n\r\n\r\n\r\n<h3 class=\"sa sa--up\">HTML\u30b3\u30fc\u30c9<\/h3>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;div class=\"linestamp-04\"&gt;\r\n  &lt;i class=\"fa-solid fa-person-praying\"&gt;&lt;\/i&gt;\r\n  &lt;span class=\"text-04\"&gt;\u3059\u307e\u3093&lt;\/span&gt;\r\n&lt;\/div&gt;<\/pre>\r\n<h3 class=\"sa sa--up\">CSS\u30b3\u30fc\u30c9<\/h3>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.linestamp-04 {\r\n  position: relative;\r\n  height: 120px;\r\n  width: 120px;\r\n  overflow: hidden;\r\n}\r\n.linestamp-04 i {\r\n  position: absolute;\r\n  font-size: 70px;\r\n  color: #4169E1;\r\n  left: 25px;\r\n  bottom: 40px;\r\n  animation: icon-animation-04 3s ease-in-out infinite;\r\n}\r\n.linestamp-04 .text-04 {\r\n  position: absolute;\r\n  bottom: 10px;\r\n  left: 0;\r\n  right: 0;\r\n  text-align: center;\r\n  font-weight: bold;\r\n  font-size: 20px;\r\n  color: #1E90FF;\r\n  text-shadow: 2px 2px 1px #fff, -2px -2px 1px #fff, -2px 2px 1px #fff,\r\n  2px -2px 1px #fff, 0 2px 1px #fff, 0 -2px 1px #fff, -2px 0 1px #fff,\r\n  2px 0 1px #fff, 0 0 5px rgba(255, 255, 255, 0.7), 0 1px 4px #000;\r\n  animation: text-04 0.1s ease-in-out infinite;\r\n}\r\n@keyframes icon-animation-04 {\r\n  0% {\r\n    transform: rotate(0deg) translate(-20px, 0);\r\n  }\r\n  6% {\r\n    transform: rotate(80deg) translate(20px, -15px);\r\n  }\r\n  82% {\r\n    transform: rotate(80deg) translate(20px, -15px);\r\n  }\r\n  100% {\r\n    transform: rotate(0deg) translate(-20px, 0);\r\n  }\r\n}\r\n@keyframes text-04 {\r\n    0% {\r\n        transform: translate(0px, 0px)\r\n    }\r\n    50% {\r\n        transform: translate(0px, 0px) rotateZ(4deg)\r\n    }\r\n}<\/pre>\r\n\r\n\r\n\r\n\r\n\r\n<\/div><\/div><\/div>\r\n<h2>\u6ce3\u304d\u308f\u3081\u304f\u300c\u3084\u3060\u3084\u3060\u3084\u3060\u300d<\/h2>\r\n<div class=\"linestamp-05\"><i class=\"fa-solid fa-face-tired\"><\/i> <span class=\"text-05\">\u3084\u3060\u3084\u3060\u3084\u3060<\/span><\/div>\r\n<div><div class=\"su-spoiler su-spoiler-style-default su-spoiler-icon-plus su-spoiler-closed\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span>\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u3092\u898b\u308b<\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\">\r\n\r\n\r\n\r\n\r\n\r\n<h3 class=\"sa sa--up\">HTML\u30b3\u30fc\u30c9<\/h3>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;div class=\"linestamp-05\"&gt;\r\n  &lt;i class=\"fa-solid fa-face-tired\"&gt;&lt;\/i&gt;\r\n  &lt;span class=\"text-05\"&gt;\u3084\u3060\u3084\u3060\u3084\u3060&lt;\/span&gt;\r\n&lt;\/div&gt;<\/pre>\r\n<h3 class=\"sa sa--up\">CSS\u30b3\u30fc\u30c9<\/h3>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.linestamp-05 {\r\n  position: relative;\r\n  height: 120px;\r\n  width: 120px;\r\n  overflow: hidden;\r\n}\r\n.linestamp-05 i {\r\n  position: absolute;\r\n  font-size: 70px;\r\n  color: #1E90FF;\r\n  left: 25px;\r\n  bottom: 35px;\r\n  animation: icon-animation-05 0.15s ease-in-out infinite;\r\n}\r\n.linestamp-05 .text-05 {\r\n  position: absolute;\r\n  bottom: 10px;\r\n  left: 0;\r\n  right: 0;\r\n  text-align: center;\r\n  font-weight: bold;\r\n  font-size: 16px;\r\n  color: #FF8C00;\r\n  text-shadow: 2px 2px 1px #fff, -2px -2px 1px #fff, -2px 2px 1px #fff,\r\n  2px -2px 1px #fff, 0 2px 1px #fff, 0 -2px 1px #fff, -2px 0 1px #fff,\r\n  2px 0 1px #fff, 0 0 5px rgba(255, 255, 255, 0.7), 0 1px 4px #000;\r\n  animation: text-05 0.1s ease-in-out infinite;\r\n}\r\n@keyframes icon-animation-05 {\r\n  0%, 100% {\r\n    transform: translate(0, 0) rotate(0deg);\r\n  }\r\n  25% {\r\n    transform: translate(-5px, -5px) rotate(-10deg);\r\n  }\r\n  50% {\r\n    transform: translate(5px, 0) rotate(10deg);\r\n  }\r\n  75% {\r\n    transform: translate(-5px, 5px) rotate(-5deg);\r\n  }\r\n}\r\n@keyframes text-05 {\r\n  0%, 100% {\r\n    transform: translate(1px, 0) rotate(1deg);\r\n  }\r\n  50% {\r\n    transform: translate(-1px, -1px) rotate(-2deg);\r\n  }\r\n}<\/pre>\r\n\r\n\r\n\r\n\r\n\r\n<\/div><\/div><\/div>\r\n<h2>\u30ad\u30ec\u306a\u304c\u3089\u300c\u3086\u308b\u3055\u3093\u300d<\/h2>\r\n<div class=\"linestamp-06\"><i class=\"fa-solid fa-face-angry\"><\/i> <span class=\"text-06\">\u3086\u308b\u3055\u3093<\/span><\/div>\r\n<div>\r\n<h3 class=\"sa sa--up\">\u7d76\u5bfe\u3086\u308b\u3055\u3093\u30a2\u30ec\u30f3\u30b8<\/h3>\r\n<div class=\"linestamp-06 arenji-06\"><i class=\"fa-solid fa-people-group\"><\/i><span class=\"text-06\">\u3086\u308b\u3055\u3093<\/span><\/div>\r\n<p>\u30a2\u30a4\u30b3\u30f3\u3092<span class=\"marker_yellow_futo\">&lt;i class=&#8221;fa-solid fa-people-group&#8221;&gt;&lt;\/i&gt;<\/span>\u306b\u3057\u3001\u6587\u5b57\u8272\u3068\u30a2\u30a4\u30b3\u30f3\u8272\u3092\u53cd\u8ee2\u3055\u305b\u308b\u3068\u3001\u72b6\u6cc1\u306e\u6df1\u523b\u3055\u304c\u30a2\u30c3\u30d7\u3057\u307e\u3059\u3002<\/p>\r\n\r\n\r\n\r\n\r\n\r\n<div class=\"su-spoiler su-spoiler-style-default su-spoiler-icon-plus su-spoiler-closed\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span>\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u3092\u898b\u308b<\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\">\r\n\r\n\r\n\r\n\r\n\r\n<h3 class=\"sa sa--up\">HTML\u30b3\u30fc\u30c9<\/h3>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;div class=\"linestamp-06\"&gt;\r\n  &lt;i class=\"fa-solid fa-face-angry\"&gt;&lt;\/i&gt;\r\n  &lt;span class=\"text-06\"&gt;\u3086\u308b\u3055\u3093&lt;\/span&gt;\r\n&lt;\/div&gt;<\/pre>\r\n<h3 class=\"sa sa--up\">CSS\u30b3\u30fc\u30c9<\/h3>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.linestamp-06 {\r\n  position: relative;\r\n  height: 120px;\r\n  width: 120px;\r\n  overflow: hidden;\r\n}\r\n.linestamp-06 i {\r\n  position: absolute;\r\n  font-size: 70px;\r\n  color: #FF4500;\r\n  left: 25px;\r\n  bottom: 35px;\r\n  animation: icon-animation-06 0.1s ease-in-out infinite;\r\n}\r\n.linestamp-06 .text-06 {\r\n  position: absolute;\r\n  bottom: 15px;\r\n  left: 0;\r\n  right: 0;\r\n  text-align: center;\r\n  font-weight: bold;\r\n  font-size: 18px;\r\n  color: black; \r\n  text-shadow: 2px 2px 1px #fff, -2px -2px 1px #fff, -2px 2px 1px #fff,\r\n  2px -2px 1px #fff, 0 2px 1px #fff, 0 -2px 1px #fff, -2px 0 1px #fff,\r\n  2px 0 1px #fff, 0 0 5px rgba(255, 255, 255, 0.7), 0 1px 4px #000;\r\n  animation: text-06 1s ease-in-out infinite;\r\n}\r\n@keyframes icon-animation-06 {\r\n  0%, 100% {\r\n    transform: translate(0, 0) rotate(0deg);\r\n  }\r\n  25% {\r\n    transform: translate(-2px, -2px) rotate(-2deg);\r\n  }\r\n  50% {\r\n    transform: translate(2px, 2px) rotate(2deg);\r\n  }\r\n  75% {\r\n    transform: translate(-2px, 2px) rotate(-2deg);\r\n  }\r\n}\r\n@keyframes text-06 {\r\n  0%,6%,12% { transform: translate(10px, 3px); }\r\n  3%,9%,15% { transform: translate(-3px, -10px) rotate(-30deg); }\r\n  18%,100% { transform: translate(0px, 0px); }\r\n}<\/pre>\r\n\r\n\r\n\r\n\r\n\r\n<\/div><\/div><\/div>\r\n<h2>\u6fc0\u3057\u304f\u300c\u304a\u304e\u3083\u3042\u3042\u3042\u300d<\/h2>\r\n<div class=\"linestamp-08\"><i class=\"fa-solid fa-baby\"><\/i> <span class=\"text-08\">\u304a\u304e\u3083\u3042\u3042\u3042<\/span><\/div>\r\n<div><div class=\"su-spoiler su-spoiler-style-default su-spoiler-icon-plus su-spoiler-closed\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span>\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u3092\u898b\u308b<\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\">\r\n\r\n\r\n\r\n\r\n\r\n<h3 class=\"sa sa--up\">HTML\u30b3\u30fc\u30c9<\/h3>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;div class=\"linestamp-08\"&gt;\r\n  &lt;i class=\"fa-solid fa-baby\"&gt;&lt;\/i&gt;\r\n  &lt;span class=\"text-08\"&gt;\u304a\u304e\u3083\u3042\u3042\u3042&lt;\/span&gt;\r\n&lt;\/div&gt;<\/pre>\r\n<h3 class=\"sa sa--up\">CSS\u30b3\u30fc\u30c9<\/h3>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.linestamp-08 {\r\n  position: relative;\r\n  height: 120px;\r\n  width: 120px;\r\n  overflow: hidden;\r\n}\r\n\r\n.linestamp-08 i {\r\n  position: absolute;\r\n  font-size: 70px;\r\n  color: #5AC9FF;\r\n  left: 30px;\r\n  top: 20px;\r\n  animation: icon-animation-08 0.2s ease-in-out infinite;\r\n}\r\n.linestamp-08 .text-08 {\r\n  position: absolute;\r\n  bottom: 40px;\r\n  left: 0;\r\n  right: 0;\r\n  text-align: center;\r\n  font-weight: bold;\r\n  font-size: 14px;\r\n  color: #FF4A2A;\r\n  text-shadow: 2px 2px 1px #fff, -2px -2px 1px #fff, -2px 2px 1px #fff,\r\n  2px -2px 1px #fff, 0 2px 1px #fff, 0 -2px 1px #fff, -2px 0 1px #fff,\r\n  2px 0 1px #fff, 0 0 5px rgba(255, 255, 255, 0.7), 0 1px 4px #000;\r\n  animation: text-08 0.1s ease-in-out infinite;\r\n}\r\n.linestamp-08 .text-08::first-letter {\r\n  font-size: 24px;\r\n}\r\n@keyframes icon-animation-08 {\r\n  0%, 100% {\r\n    transform: translate(0, 0) rotate(0deg);\r\n  }\r\n  25% {\r\n    transform: translate(-4px, -4px) rotate(-5deg);\r\n  }\r\n  50% {\r\n    transform: translate(4px, 4px) rotate(5deg);\r\n  }\r\n  75% {\r\n    transform: translate(-4px, 4px) rotate(-5deg);\r\n  }\r\n}\r\n@keyframes text-08 {\r\n  0%, 100% {\r\n    transform: translate(0, 0);\r\n  }\r\n  25% {\r\n    transform: translate(-2px, 1px);\r\n  }\r\n  50% {\r\n    transform: translate(2px, -1px);\r\n  }\r\n  75% {\r\n    transform: translate(-1px, -1px);\r\n  }\r\n}<\/pre>\r\n\r\n\r\n\r\n\r\n\r\n<\/div><\/div><\/div>\r\n<h2>\u304a\u307c\u308c\u308b\u300c\u3046\u308f\u3041\u3041\u3042\u300d<\/h2>\r\n<div class=\"linestamp-09\"><i class=\"fa-solid fa-person-drowning\"><\/i> <span class=\"text-09\">\u3046\u308f\u3041\u3041\u3042<\/span><\/div>\r\n<div><div class=\"su-spoiler su-spoiler-style-default su-spoiler-icon-plus su-spoiler-closed\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span>\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u3092\u898b\u308b<\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\">\r\n\r\n\r\n\r\n\r\n\r\n<h3 class=\"sa sa--up\">HTML\u30b3\u30fc\u30c9<\/h3>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;div class=\"linestamp-09\"&gt;\r\n&lt;i class=\"fa-solid fa-person-drowning\"&gt;&lt;\/i&gt;\r\n  &lt;span class=\"text-09\"&gt;\u3046\u308f\u3041\u3041\u3042&lt;\/span&gt;\r\n&lt;\/div&gt;<\/pre>\r\n<h3 class=\"sa sa--up\">CSS\u30b3\u30fc\u30c9<\/h3>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.linestamp-09 {\r\n  position: relative;\r\n  height: 120px;\r\n  width: 120px;\r\n  overflow: hidden;\r\n}\r\n.linestamp-09 i {\r\n  position: absolute;\r\n  font-size: 70px;\r\n  color: #4169e1;\r\n  left: 25px;\r\n  bottom: 35px;\r\n  animation: icon-animation-09 0.8s ease-in-out infinite;\r\n}\r\n.linestamp-09 .text-09{\r\n  position: absolute;\r\n  bottom: 20px;\r\n  left: 0;\r\n  right: 0;\r\n  text-align: center;\r\n  font-weight: bold;\r\n  font-size: 20px;\r\n  color: #1e90ff;\r\n    text-shadow: 2px 2px 1px #fff, -2px -2px 1px #fff, -2px 2px 1px #fff,\r\n  2px -2px 1px #fff, 0 2px 1px #fff, 0 -2px 1px #fff, -2px 0 1px #fff,\r\n  2px 0 1px #fff, 0 0 5px rgba(255, 255, 255, 0.7), 0 1px 4px #000;\r\n  animation: text-09 0.1s ease-in-out infinite;\r\n}\r\n@keyframes icon-animation-09 {\r\n  0%,\r\n  99.9%,\r\n  50% {\r\n    transform: scaleX(-1);\r\n  }\r\n  0.1%,\r\n  100%,\r\n  49.9% {\r\n    transform: scaleX(1);\r\n  }\r\n}\r\n@keyframes text-09 {\r\n  0%, 100% {\r\n    transform: translate(1px, -5px) rotate(2deg);\r\n  }\r\n  50% {\r\n    transform: translate(-1px, -5px) rotate(-2deg);\r\n  }\r\n}<\/pre>\r\n\r\n\r\n\r\n\r\n\r\n<\/div><\/div><\/div>\r\n<h2>\u6e26\u306b\u98f2\u307e\u308c\u308b\u300c\u3046\u308f\u3041\u3041\u3042\u300d<\/h2>\r\n<div class=\"linestamp-10\"><i class=\"fa-solid fa-person-drowning\"><\/i> <span class=\"text-10\">\u3046\u308f\u3041\u3041\u3042<\/span><\/div>\r\n<div><div class=\"su-spoiler su-spoiler-style-default su-spoiler-icon-plus su-spoiler-closed\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span>\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u3092\u898b\u308b<\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\">\r\n\r\n\r\n\r\n\r\n\r\n<h3 class=\"sa sa--up\">HTML\u30b3\u30fc\u30c9<\/h3>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;div class=\"linestamp-10\"&gt;\r\n&lt;i class=\"fa-solid fa-person-drowning\"&gt;&lt;\/i&gt;\r\n  &lt;span class=\"text-10\"&gt;\u3046\u308f\u3041\u3041\u3042&lt;\/span&gt;\r\n&lt;\/div&gt;<\/pre>\r\n<h3 class=\"sa sa--up\">CSS\u30b3\u30fc\u30c9<\/h3>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.linestamp-10 {\r\n  position: relative;\r\n  height: 120px;\r\n  width: 120px;\r\n  overflow: hidden;\r\n}\r\n.linestamp-10 i {\r\n  position: absolute;\r\n  font-size: 70px;\r\n  color: #4169e1;\r\n  left: 25px;\r\n  bottom: 35px;\r\n  animation: icon-animation-10 0.8s ease-in-out infinite;\r\n}\r\n.linestamp-10 .text-10 {\r\n  position: absolute;\r\n  bottom: 20px;\r\n  left: 0;\r\n  right: 0;\r\n  text-align: center;\r\n  font-weight: bold;\r\n  font-size: 20px;\r\n  color: #1e90ff;\r\n    text-shadow: 2px 2px 1px #fff, -2px -2px 1px #fff, -2px 2px 1px #fff,\r\n  2px -2px 1px #fff, 0 2px 1px #fff, 0 -2px 1px #fff, -2px 0 1px #fff,\r\n  2px 0 1px #fff, 0 0 5px rgba(255, 255, 255, 0.7), 0 1px 4px #000;\r\n  animation: text-10 0.1s ease-in-out infinite;\r\n}\r\n@keyframes icon-animation-10 {\r\n  0%,100%{\r\n    transform: scaleX(-1);\r\n  }\r\n  50% {\r\n    transform: scaleX(1);\r\n  }\r\n}\r\n@keyframes text-10 {\r\n  0%, 100% {\r\n    transform: translate(0, 0);\r\n  }\r\n  25% {\r\n    transform: translate(-2px, 1px);\r\n  }\r\n  50% {\r\n    transform: translate(2px, -1px);\r\n  }\r\n  75% {\r\n    transform: translate(-1px, -1px);\r\n  }\r\n}<\/pre>\r\n<p>&nbsp;<\/p>\r\n\r\n\r\n\r\n\r\n\r\n<\/div><\/div><\/div>\r\n<\/div>","protected":false},"excerpt":{"rendered":"FontAwesome\u306e\u30a2\u30a4\u30b3\u30f3\u30d5\u30a9\u30f3\u30c8\u3068CSS\u3067\u4f5c\u308b\u3001\u6ce3\u304d\u3084\u6012\u308a\u306eLINE\u30b9\u30bf\u30f3\u30d7\u98a8\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3002","protected":false},"author":1,"featured_media":2412,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3],"tags":[],"class_list":["post-2407","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css"],"acf":[],"_links":{"self":[{"href":"https:\/\/haugenic.com\/index.php?rest_route=\/wp\/v2\/posts\/2407","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/haugenic.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/haugenic.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/haugenic.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/haugenic.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2407"}],"version-history":[{"count":6,"href":"https:\/\/haugenic.com\/index.php?rest_route=\/wp\/v2\/posts\/2407\/revisions"}],"predecessor-version":[{"id":2414,"href":"https:\/\/haugenic.com\/index.php?rest_route=\/wp\/v2\/posts\/2407\/revisions\/2414"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/haugenic.com\/index.php?rest_route=\/wp\/v2\/media\/2412"}],"wp:attachment":[{"href":"https:\/\/haugenic.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2407"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/haugenic.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2407"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/haugenic.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2407"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}